PageSourceSearch

https://www.heifer.org/

html heifer.org collected 2026-10-01 08:36:18 UTC 570,470 bytes, 8,776 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        
4<script>
5    !function() {
6        window.semaphore = window.semaphore || [], window.ketch = function() {
7            window.semaphore.push(arguments)
8        };
9        var e = document.createElement("script");
10        e.type = "text/javascript", e.src = "https://global.ketchcdn.com/web/v3/config/heifer/heifer/boot.js", e.defer =
11            e.async = !0, document.getElementsByTagName("head")[0].appendChild(e)
12    }();
13    window.ketch("on", "consent", (consent) => {
14        const ketchUpdatedConsent = consent.purposes;
15
16        window.ketch("getConfig", (ketchConfig) => {
17            const purposeConfig = ketchConfig.purposes;
18
19            var canonicalPurposeGoogleKeyMap = {
20                behavioral_advertising: ["ad_storage", "ad_user_data"],
21                analytics: ["analytics_storage"],
22                essential_services: ["functionality_storage", "security_storage"],
23                personalization: ["personalization_storage", "ad_personalization"],
24            };
25
26            let consentWithGooglePurposes = {};
27
28            for (const purposeCode in ketchUpdatedConsent) {
29                if (!purposeCode.includes(".")) {
30                    consentWithGooglePurposes[purposeCode] = ketchUpdatedConsent[purposeCode];
31                    for (const purpose of purposeConfig) {
32                        if (purpose.code === purposeCode) {
33                            const canonicalPurposes = purpose.canonicalPurposeCodes;
34                            if (canonicalPurposes) {
35                                for (const canonicalPurpose of canonicalPurposes) {
36                                    if (canonicalPurposeGoogleKeyMap[canonicalPurpose]) {
37                                        const gPurposes = canonicalPurposeGoogleKeyMap[
38                                        canonicalPurpose];
39                                        for (const gp of gPurposes) {
40                                            if (consentWithGooglePurposes[gp]) {
41                                                consent[gp] = consentWithGooglePurposes[gp] ||
42                                                    ketchUpdatedConsent[purposeCode];
43                                            } else {
44                                                consentWithGooglePurposes[gp] = ketchUpdatedConsent[
45                                                    purposeCode];
46                                            }
47                                        }
48                                    }
49                                }
50                            }
51                        }
52                    }
53                }
54            }
55
56            if (consent.purposes && window.gtmConsentListeners) {
57                const consentUpdate = {
58                    purposes: consentWithGooglePurposes
59                };
60                window.gtmConsentListeners?.forEach((callback) => {
61                    callback(consentUpdate);
62                });
63            }
64
65        });
66    });
67</script>
67
68        <meta charset="utf-8">
69        <meta name="viewport" content="width=device-width, initial-scale=1">
70        <meta name="csrf-token" content="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn">
71
72        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
73        <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 
74        
75        <title>Home - Heifer International</title>
76          <link rel="canonical" href="https://www.heifer.org/">
77                <meta name="og:locale" content="en_US">
78                <meta name="og:type" content="article">
79                <meta name="og:title" content="Home - Heifer International">
80                <meta name="og:url" content="https://www.heifer.org">
81                <meta name="og:site_name" content="Heifer International">
82                <meta name="article_modified_time" content="2026-09-15T19:41:52+00:00">
83                <meta property="og:image" content="https://media-refresh.heifer.org/wp-content/uploads/farmers-in-field-e1738701868199.jpg" height="825" type="image/jpeg" width="1387" />
84                <meta name="twitter_card" content="summary_large_image">
85          
85<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.heifer.org\/","url":"https:\/\/www.heifer.org\/","name":"Home - Heifer International","isPartOf":{"@id":"https:\/\/www.heifer.org\/#website"},"datePublished":"2026-09-01T04:00:35+00:00","dateModified":"2026-09-15T19:41:52+00:00","breadcrumb":{"@id":"https:\/\/www.heifer.org\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heifer.org\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.heifer.org\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heifer.org\/"},{"@type":"ListItem","position":2,"name":"Heifer Home"}]},{"@type":"WebSite","@id":"https:\/\/www.heifer.org\/#website","url":"https:\/\/www.heifer.org\/","name":"Heifer International","description":"","publisher":{"@id":"https:\/\/www.heifer.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.heifer.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.heifer.org\/#organization","name":"Heifer International","url":"https:\/\/www.heifer.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.heifer.org\/#\/schema\/logo\/image\/","url":"https:\/\/www.heifer.org\/wp-content\/uploads\/logo-navy.svg","contentUrl":"https:\/\/www.heifer.org\/wp-content\/uploads\/logo-navy.svg","width":1,"height":1,"caption":"Heifer International"},"image":{"@id":"https:\/\/www.heifer.org\/#\/schema\/logo\/image\/"}}]}</script>
85
86  
87  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
88
89<link rel="dns-prefetch" href="//media-refresh.heifer.org">
90<link rel="preconnect" href="//media-refresh.heifer.org">        <!-- Google Tag Manager -->
91<script nonce='GzzEXkzRhSqVewneDbQQRw=='>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
92new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
93j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
94'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
95n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
96})(window,document,'script','dataLayer','GTM-WQ8JJZ');</script>
96
97<!-- End Google Tag Manager -->        <!-- Start VWO Async SmartCode -->
98<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
99<script type='text/javascript' id='vwoCode'>
100window._vwo_code || (function() {
101var account_id=940069,
102version=2.1,
103settings_tolerance=2000,
104hide_element='body',
105hide_element_style = 'opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;transition:none !important;',
106/* DO NOT EDIT BELOW THIS LINE */
107f=false,w=window,d=document,v=d.querySelector('#vwoCode'),cK='_vwo_'+account_id+'_settings',cc={};try{var c=JSON.parse(localStorage.getItem('_vwo_'+account_id+'_config'));cc=c&&typeof c==='object'?c:{}}catch(e){}var stT=cc.stT==='session'?w.sessionStorage:w.localStorage;code={nonce:v&&v.nonce,library_tolerance:function(){return typeof library_tolerance!=='undefined'?library_tolerance:undefined},settings_tolerance:function(){return cc.sT||settings_tolerance},hide_element_style:function(){return'{'+(cc.hES||hide_element_style)+'}'},hide_element:function(){if(performance.getEntriesByName('first-contentful-paint')[0]){return''}return typeof cc.hE==='string'?cc.hE:hide_element},getVersion:function(){return version},finish:function(e){if(!f){f=true;var t=d.getElementById('_vis_opt_path_hides');if(t)t.parentNode.removeChild(t);if(e)(new Image).src='https://dev.visualwebsiteoptimizer.com/ee.gif?a='+account_id+e}},finished:function(){return f},addScript:function(e){var t=d.createElement('script');t.type='text/javascript';if(e.src){t.src=e.src}else{t.text=e.text}v&&t.setAttribute('nonce',v.nonce);d.getElementsByTagName('head')[0].appendChild(t)},load:function(e,t){var n=this.getSettings(),i=d.createElement('script'),r=this;t=t||{};if(n){i.textContent=n;d.getElementsByTagName('head')[0].appendChild(i);if(!w.VWO||VWO.caE){stT.removeItem(cK);r.load(e)}}else{var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200||o.status===304){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}},getSettings:function(){try{var e=stT.getItem(cK);if(!e){return}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return}return e.s}catch(e){return}},init:function(){if(d.URL.indexOf('__vwo_disable__')>-1)return;var e=this.settings_tolerance();w._vwo_settings_timer=setTimeout(function(){_vwo_code.finish();stT.removeItem(cK)},e);var t;if(this.hide_element()!=='body'){t=d.createElement('style');var n=this.hide_element(),i=n?n+this.hide_element_style():'',r=d.getElementsByTagName('head')[0];t.setAttribute('id','_vis_opt_path_hides');v&&t.setAttribute('nonce',v.nonce);t.setAttribute('type','text/css');if(t.styleSheet)t.styleSheet.cssText=i;else t.appendChild(d.createTextNode(i));r.appendChild(t)}else{t=d.getElementsByTagName('head')[0];var i=d.createElement('div');i.style.cssText='z-index: 2147483647 !important;position: fixed !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;background: white !important;display: block !important;';i.setAttribute('id','_vis_opt_path_hides');i.classList.add('_vis_hide_layer');t.parentNode.insertBefore(i,t.nextSibling)}var o=window._vis_opt_url||d.URL,s='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(o)+'&vn='+version;if(w.location.search.indexOf('_vwo_xhr')!==-1){this.addScript({src:s})}else{this.load(s+'&x=true')}}};w._vwo_code=code;code.init();})();
108</script>
108
109<!-- End VWO Async SmartCode -->
110                
111        <link rel="preload" as="style" href="https://www.heifer.org/build/assets/app-DIzfPuSq.css" /><link rel="preload" as="style" href="https://www.heifer.org/build/assets/spritemap-critical-De7hk_IX.css" /><link rel="modulepreload" href="https://www.heifer.org/build/js/app.BwAPlRkK.js" /><link rel="stylesheet" nonce="GzzEXkzRhSqVewneDbQQRw==" href="https://www.heifer.org/build/assets/app-DIzfPuSq.css" /><link rel="stylesheet" nonce="GzzEXkzRhSqVewneDbQQRw==" href="https://www.heifer.org/build/assets/spritemap-critical-De7hk_IX.css" />
111<script nonce="GzzEXkzRhSqVewneDbQQRw==" type="module" src="https://www.heifer.org/build/js/app.BwAPlRkK.js"></script>
111        <link rel="preload" as="style" href="https://www.heifer.org/build/assets/spritemap-default-GlL478bk.css" /><link rel="preload" as="style" onload="this.rel='stylesheet'" nonce="GzzEXkzRhSqVewneDbQQRw==" href="https://www.heifer.org/build/assets/spritemap-default-GlL478bk.css" />            </head>
112    <body data-post-type="page">
113                <!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 113-114
113
114<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
114GTM-WQ8JJZ
vendor: 83 bytes, lines 114-115
114"
115height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
116<!-- End Google Tag Manager (noscript) -->        <div class="tw-mt-0">
117          </div>
118
119<header class="tw-py-4 lg:tw-py-6">
120  <div class="tw-wrapper tw-grid tw-gap-y-4 lg:tw-gap-y-2">
121
122    
123    <nav aria-label="Eyebrow Navigation" class="tw-hidden lg:tw-flex tw-justify-end">
124    <ul class="tw-flex tw-items-center tw-gap-8">
125        <li class="tw-flex tw-h-full">
126            
127          <div class="tw-flex tw-items-center tw-w-full lg:tw-w-auto">
128            <div
129    x-data="Search"
130    x-load
131    x-cloak
132    class="tw-relative tw-flex tw-items-center tw-w-full"
133>
134    <!-- Search Input Field -->
135    <div 
136        x-show="isVisible" 
137        x-on:click.away="hide" 
138        x-on:keyup.escape="hide"
139        class="tw-flex tw-items-center tw-border-2 tw-border-grand-blue tw-w-full"
140    >
141        <form action="/search" method="GET" class="tw-w-full tw-flex tw-items-center">
142            <input 
143                x-ref="inputField" 
144                type="search" 
145                name="s" 
146                class="tw-w-full tw-py-1 tw-px-3 tw-outline-none" 
147                placeholder="Search"
148                x-on:blur="hide"
149            >
150            <button type="submit" class="tw-px-3 tw-hidden">
151                <span aria-hidden="true" class="tw-icon sprite-search-mask tw-bg-active-blue"></span>            </button>
152        </form>
153    </div>
154
155    <!-- Search Button -->
156    <button 
157        x-show="isNotVisible"
158        x-on:click="show"
159        class="tw-flex tw-cursor-pointer tw-decoration-vista-blue tw-decoration-[3px] tw-gap-x-1 tw-items-center hover:tw-underline"
160    >
161        <span aria-hidden="true" class="tw-size-[14px]">
162            <svg width="14px" height="14px" viewBox="0 0 130 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
163            <path d="M87.2846635,93.5352302 C78.0444013,101.357203 66.0914378,106.073737 53.0368687,106.073737 C23.7454149,106.073737 0,82.3283224 0,53.0368687 C0,23.7454149 23.7454149,1.42108547e-14 53.0368687,1.42108547e-14 C82.3283224,1.42108547e-14 106.073737,23.7454149 106.073737,53.0368687 C106.073737,66.0914948 101.357162,78.0445058 93.5351277,87.2847846 L130,123.751681 L123.749372,130.001962 L87.2846635,93.5352302 Z M53.0368687,97.2342592 C77.4464134,97.2342592 97.2342592,77.4464134 97.2342592,53.0368687 C97.2342592,28.6273239 77.4464134,8.83947811 53.0368687,8.83947811 C28.6273239,8.83947811 8.83947811,28.6273239 8.83947811,53.0368687 C8.83947811,77.4464134 28.6273239,97.2342592 53.0368687,97.2342592 Z" fill="var(--color-active-blue)"></path>
164            </svg>
165        </span>
166        <span class="tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-mt-[2px]">Search</span>
167    </button>
168</div>          </div>
169        </li>
170                                    <li>
171                    <a class="tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/about-us">About Us</a>
172                </li>
173                            <li>
174                    <a class="tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/about-us/media-center">Media Center</a>
175                </li>
176                            <li>
177                    <a class="tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/support">Need Help?</a>
178                </li>
179                            <li>
180            <a class="tw-flex tw-gap-x-1 tw-items-center tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="https://myaccount.heifer.org/account/index.html">
181                <span aria-hidden="true" class="tw-size-[18px]">                    
182                    <svg width="18px" height="18px" viewBox="0 0 130 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
183    <g id="account" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
184        <path d="M28.8877754,108.237787 C38.6654959,116.412919 51.2581358,121.333333 65,121.333333 C78.7747112,121.333333 91.3946975,116.389369 101.182291,108.179108 C95.7321777,104.100379 86.7593974,98.3918599 82.9044817,96.4583941 L80.5139019,95.2593784 L80.5139019,84.9444054 L80.9058309,84.0866221 C81.5876462,82.5943882 82.1542491,80.9105287 82.5777983,79.1048335 L83.1045894,76.8589927 L85.2618548,76.0419762 C85.4834468,7
1845.9580531 85.781414,75.6844129 86.2211627,74.9604495 C86.8910855,73.8575477 87.5757303,72.1158714 88.2785563,69.6320596 C89.3713164,65.74903 89.2910777,63.4991779 88.7267814,62.8199116 L87.435443,61.2654753 L87.7962908,59.2771051 C89.3813413,50.5430442 88.7017876,44.4699676 86.177065,41.1355585 C85.247825,39.8927098 84.1976684,39.1927798 83.1449428,38.8650535 L81.7390232,38.4273736 L80.8908235,37.2237413 C79.8345387,35.724827 78.1848198,34.18029 75.8398898,32.8826026 C72.475145,30.889044 68.6040836,30.0512115 64.1814553,30.4269713 C62.6280675,30.5048828 61.0979809,30.7972363 59.5878459,31.3087066 C57.8853839,31.8779628 56.20426,32.7362016 54.4175355,33.9721428 C52.4656599,35.2277908 50.6654938,36.7155356 49.0815235,38.3906635 C46.1237126,41.4195071 44.2230509,44.7726451 43.3771987,48.428652 C42.6159546,51.3625486 42.5418388,54.2472054 43.1515773,57.0883675 L43.7248132,59.7594406 L41.5619591,61.4283605 C41.4281134,61.5316396 41.3971046,61.5602566 41.3557145,61.6108411 C40.7170775,62.3849329 40.6318821,64.4431162 41.7442995,68.4045346 C42.7627434,72.0057395 43.7431393,74.0987267 44.6021777,74.7402264 L45.9340424,75.7348162 L46.2590621,77.3649803 C46.8385678,80.2715404 47.746455,82.8607302 48.9583472,85.0860239 L49.4860981,86.0550876 L49.4860981,95.2506472 L47.1068237,96.452703 C43.5893313,98.2298089 34.4794961,104.09409 28.8877754,108.237787 Z M22.627142,102.122368 C27.7958187,98.1659387 35.8732267,92.8642702 40.8194314,90.0177775 L40.8194314,88.2177545 C39.6451077,85.8584842 38.7294272,83.2770979 38.0742961,80.5051491 C35.9797983,78.3454897 34.6816288,75.2781644 33.4025477,70.7553268 C31.6685479,64.5804401 31.7820831,59.9558884 34.2839574,56.5866744 C33.8551058,53.1659969 34.0887711,49.7200874 34.9605318,46.3653498 C36.1470714,41.2270051 38.84348,36.4700141 42.8319058,32.386634 C44.8515061,30.2497306 47.1929616,28.3146378 49.6036251,26.7669528 C51.9228536,25.1585377 54.3367501,23.9262075 56.8235004,23.0947417 C59.0740793,22.3324372 61.393663,21.8892346 63.5949159,21.7815245 C69.6311485,21.2649802 75.3074902,22.4935381 80.1441549,25.3614767 C83.0736274,26.9798382 85.4016864,28.9923466 87.1267637,31.1125777 C89.3310693,32.0702184 91.3995265,33.6472928 93.1022965,35.9248402 C97.1394154,41.2564633 98.1929198,49.0706546 96.6085435,59.1443904 C98.2369426,62.4069078 98.1068145,66.7006914 96.6194824,71.9857853 C95.0660625,77.475662 93.2690729,81.0085659 90.5202926,82.9790817 C90.1374371,84.3045071 89.6894668,85.5810367 89.1805686,86.7935848 L89.1805686,89.9964647 C94.2984723,92.8845553 102.286088,98.0748958 107.42456,102.063319 C116.085514,92.1576963 121.333333,79.1916951 121.333333,65 C121.333333,33.8879591 96.1120409,8.66666667 65,8.66666667 C33.8879591,8.66666667 8.66666667,33.8879591 8.66666667,65 C8.66666667,79.2199122 13.9353751,92.2092515 22.627142,102.122368 Z M65,130 C29.1014913,130 0,100.898509 0,65 C0,29.1014913 29.1014913,0 65,0 C100.898509,0 130,29.1014913 130,65 C130,100.898509 100.898509,130 65,130 Z" id="Combined-Shape" fill="var(--color-active-blue)" fill-rule="nonzero"></path>
185    </g>
186</svg>                </span>
187                <span>My Account</span>
188            </a>
189        </li>
190        <li>
191            <button x-data="CartToggle" x-load class="tw-flex tw-cursor-pointer tw-gap-x-1 tw-items-center tw-text-xs tw-tracking-[1.5px] tw-uppercase tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" @click="openCart" x-bind:aria-label="cartToggleAriaLabel">
192                <span class="tw-relative">
193                    <span class="tw-size-[18px]">
194                        <svg width="19px" height="17px" viewBox="0 0 19 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
195    <g id="Gift-Card" stroke="none" stroke-width="1">
196        <g id="Gift-Card-Landing---Print" transform="translate(-1150.000000, -21.000000)">
197            <g id="Group-14" transform="translate(1150.000000, 20.000000)">
198                <path d="M13.8743152,6.86209961 L10.3669347,1.92578634 C10.1794151,1.66186986 10.241347,1.2959086 10.5052635,1.108389 C10.7691799,0.92086939 11.1351412,0.982801295 11.3226608,1.24671778 L15.2795465,6.81566797 C15.2903168,6.83082627 15.3002643,6.84632119 15.3093978,6.86209961 L18.1723638,6.86209961 C18.496116,6.86209961 18.7585691,7.12455266 18.7585691,7.44830489 L18.7585691,9.79312603 C18.7585691,10.1168783 18.496116,10.3793313 18.1723638,10.3793313 L17.4178124,10.3793313 L16.6124,15.9884529 C16.4466369,17.1428746 15.4576461,18 14.2913842,18 L4.46718488,18 C3.30092298,18 2.31193215,17.1428746 2.14616904,15.9884529 L1.3407567,10.3793313 L0.586205284,10.3793313 C0.262453045,10.3793313 1.31095135e-12,10.1168783 1.31095135e-12,9.79312603 L1.31095135e-12,7.44830489 C1.31095135e-12,7.12455266 0.262453045,6.86209961 0.586205284,6.86209961 L3.30261993,6.86209961 C3.31175346,6.84632119 3.32170091,6.83082627 3.33247128,6.81566797 L7.28935695,1.24671778 C7.47687655,0.982801295 7.84283781,0.92086939 8.10675429,1.108389 C8.37067077,1.2959086 8.43260268,1.66186986 8.24508307,1.92578634 L4.73770259,6.86209961 L13.8743152,6.86209961 Z M16.2333771,10.3793313 L2.52519199,10.3793313 L3.30667696,15.8218159 C3.38955851,16.3990267 3.88405393,16.8275894 4.46718488,16.8275894 L14.2913842,16.8275894 C14.8745151,16.8275894 15.3690106,16.3990267 15.4518921,15.8218159 L16.2333771,10.3793313 Z M17.5861585,9.20692075 L17.5861585,8.03451018 L1.
19817241057,8.03451018 L1.17241057,9.20692075 L17.5861585,9.20692075 Z M5.86205284,11.5517419 C6.18580507,11.5517419 6.44825812,11.8141949 6.44825812,12.1379472 L6.44825812,15.0689736 C6.44825812,15.3927258 6.18580507,15.6551789 5.86205284,15.6551789 C5.5383006,15.6551789 5.27584755,15.3927258 5.27584755,15.0689736 L5.27584755,12.1379472 C5.27584755,11.8141949 5.5383006,11.5517419 5.86205284,11.5517419 Z M12.8965162,11.5517419 C13.2202685,11.5517419 13.4827215,11.8141949 13.4827215,12.1379472 L13.4827215,15.0689736 C13.4827215,15.3927258 13.2202685,15.6551789 12.8965162,15.6551789 C12.572764,15.6551789 12.310311,15.3927258 12.310311,15.0689736 L12.310311,12.1379472 C12.310311,11.8141949 12.572764,11.5517419 12.8965162,11.5517419 Z M10.5516951,11.5517419 C10.8754473,11.5517419 11.1379004,11.8141949 11.1379004,12.1379472 L11.1379004,15.0689736 C11.1379004,15.3927258 10.8754473,15.6551789 10.5516951,15.6551789 C10.2279429,15.6551789 9.96548982,15.3927258 9.96548982,15.0689736 L9.96548982,12.1379472 C9.96548982,11.8141949 10.2279429,11.5517419 10.5516951,11.5517419 Z M8.20687397,11.5517419 C8.53062621,11.5517419 8.79307925,11.8141949 8.79307925,12.1379472 L8.79307925,15.0689736 C8.79307925,15.3927258 8.53062621,15.6551789 8.20687397,15.6551789 C7.88312173,15.6551789 7.62066869,15.3927258 7.62066869,15.0689736 L7.62066869,12.1379472 C7.62066869,11.8141949 7.88312173,11.5517419 8.20687397,11.5517419 Z" id="Combined-Shape" fill="var(--color-active-blue)"></path>
199            </g>
200        </g>
201    </g>
202</svg>                    </span>
203                    <span
204                        x-show="cartHasItems"
205                        x-text="itemsInCart"
206                        x-cloak
207                        class="tw-font-extrabold tw-text-xs tw-leading-none tw-flex tw-items-center tw-justify-center tw-absolute tw-top-0 tw-right-0 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-bg-rich-orange tw-text-white tw-transform tw-translate-x-1/2 tw--translate-y-[0.1875rem]"
208                        aria-hidden="true"
209                        ></span>
210                </span>
211                <span aria-hidden="true">My Basket</span>
212            </button>
213
214        </li>
215    </ul>
216</nav>
217    <div class="tw-flex tw-items-center tw-justify-between tw-gap-x-16">
218        <div class="tw-relative tw-grid tw-grid-cols-4 lg:tw-grid-cols-1 tw-items-center tw-justify-between tw-w-full lg:tw-w-auto">
219            
220            <nav
221    aria-label="Main Mobile Navigation"
222    x-data="Nav"
223    x-load
224    x-cloak
225    x-init="initMobile"
226    class="tw-col-span-1 tw-flex lg:tw-hidden tw-justify-start"
227>
228    <button data-nav-trigger="nav" aria-label="Navigation Menu">
229        <div class="mobile-nav-trigger-icon tw-h-[27px] tw-w-[18px]">
230            <svg width="18px" height="27px" viewBox="0 0 131 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
231                <g id="menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1.000000, 0.000000)">
232                    <path d="M0,60.6666667 L130,60.6666667 L130,69.3333333 L0,69.3333333 L0,60.6666667 Z M0,0 L130,0 L130,8.66666667 L0,8.66666667 L0,0 Z M0,121.333333 L130,121.333333 L130,130 L0,130 L0,121.333333 Z" id="Combined-Shape-Copy-9" fill="#000000"></path>
233                </g>
234            </svg>
235        </div>
236        <div class="mobile-nav-trigger-icon tw-hidden tw-h-[27px] tw-w-[18px]">
237            <svg width="18px" height="27px" viewBox="0 0 131 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
238                <g id="close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(0.000000, 0.000000)">
239                    <path d="M71.1282588,65 L92.5771645,86.4489057 L86.4489057,92.5771645 L65,71.1282588 L43.5510943,92.5771645 L37.4228355,86.4489057 L58.8717412,65 L37.4228355,43.5510943 L43.5510943,37.4228355 L65,58.8717412 L86.4489057,37.4228355 L92.5771645,43.5510943 L71.1282588,65 Z M65,130 C29.1014913,130 0,100.898509 0,65 C0,29.1014913 29.1014913,0 65,0 C100.898509,0 130,29.1014913 130,65 C130,100.898509 100.898509,130 65,130 Z M65,12
2391.333333 C96.1120409,121.333333 121.333333,96.1120409 121.333333,65 C121.333333,33.8879591 96.1120409,8.66666667 65,8.66666667 C33.8879591,8.66666667 8.66666667,33.8879591 8.66666667,65 C8.66666667,96.1120409 33.8879591,121.333333 65,121.333333 Z" id="Combined-Shape-Copy-4" fill="#000000" fill-rule="nonzero"></path>
240                </g>
241            </svg>
242        </div>
243    </button>
244    <div
245        x-show="showNav"
246        x-cloak
247        data-nav-target="nav"
248        class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-flex tw-flex-col tw-justify-between tw-w-screen tw-bg-white tw-overflow-y-scroll tw-transition-all tw-duration-300 tw-z-40"
249    >
250        <div>
251            <div
252                x-data="Search"
253                x-load
254                class="tw-wrapper"
255            >
256                <form
257                    action="/search/"
258                    method="GET"
259                    class="tw-relative tw-flex tw-items-center tw-justify-center"
260                >
261                    <input
262                        type="search"
263                        name="s"
264                        x-ref="inputField"
265                        x-on:focus="toggleButtons"
266                        x-on:blur="toggleButtons"
267                        placeholder="Search"
268                        class="search-input-mobile tw-w-full tw-border-active-blue tw-appearance-none"
269                    >
270                    <button
271                        type="button"
272                        class="search-button tw-absolute tw-end-4 tw-pointer-events-none"
273                        tabIndex="-1"
274                        aria-label="Search"
275                    >
276                        <span aria-hidden="true" class="tw-icon sprite-search-mask tw-bg-active-blue"></span>                    </button>
277                    <button
278                        x-on:click="clearSearch"
279                        type="reset"
280                        class="search-button tw-absolute tw-end-4 tw-z-10 tw-hidden"
281                        aria-label="Clear search"
282                    >
283                        <span aria-hidden="true" class="tw-icon sprite-close-mask tw-bg-active-blue"></span>                    </button>
284                </form>
285            </div>
286
287            <ul class="tw-wrapper tw-grid tw-my-5">
288            
289        <li>
290    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
291        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work">
292            Our Work
293        </a>
294                    <button data-subnav-trigger="0" class="tw-px-4 tw-text-active-blue">
295                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
296            </div>
297    
298            <div data-subnav-target="0" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
299    <div>
300        <div class="tw-wrapper tw-space-y-5">
301            <div class="">
302                <button data-subnav-trigger="0" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
303                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
304                </button>
305            </div>
306            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Our Work</div>
307        </div>
308
309        <ul class="tw-wrapper tw-grid tw-my-5">
310            
311        <li>
312    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
313        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/approach">
314            Our Approach
315        </a>
316            </div>
317    
318    </li>            
319        <li>
320    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
321        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas">
322            Our Focus Areas
323        </a>
324                    <button data-subnav-trigger="981" class="tw-px-4 tw-text-active-blue">
325                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
326            </div>
327    
328            <div data-subnav-target="981" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
329    <div>
330        <div class="tw-wrapper tw-space-y-5">
331            <div class="">
332                <button data-subnav-trigger="981" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
333                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
334                </button>
335            </div>
336            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Our Focus Areas</div>
337        </div>
338
339        <ul class="tw-wrapper tw-grid tw-my-5">
340            
341        <li>
342    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
343        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas/work-and-income">
344            Work and Income
345        </a>
346            </div>
347    
348    </li>            
349        <li>
350    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
351        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas/women-and-inclusion">
352            Women and Inclusion
353        </a>
354            </div>
355    
356    </li>            
357        <li>
358    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
359        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas/climate-and-environment">
360            Climate and Environment
361        </a>
362            </div>
363    
364    </li>            
365        <li>
366    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
367        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas/food-security">
368            Food Security
369        </a>
370            </div>
371    
372    </li>            
373        <li>
374    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
375        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/focus-areas/one-health">
376            One Health
377        </a>
378            </div>
379    
380    </li>    </ul>    </div>
381
382    <div class="tw-mt-10 tw-py-5 tw-border-t">
383        <div class="tw-wrapper tw-text-center">
384            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
385                <span>Need Help?</span>
386                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
387        </div>
388    </div>
389</div>    </li>            
390        <li>
391    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
392        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/where-we-work">
393            Where We Work
394        </a>
395            </div>
396    
397    </li>            
398        <li>
399    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
400        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/our-work/programs">
401            Our Programs
402        </a>
403            </div>
404    
405    </li>    </ul>    </div>
406
407    <div class="tw-mt-10 tw-py-5 tw-border-t">
408        <div class="tw-wrapper tw-text-center">
409            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
410                <span>Need Help?</span>
411                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
412        </div>
413    </div>
414</div>    </li>            
415        <li>
416    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
417        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action">
418            Take Action
419        </a>
420                    <button data-subnav-trigger="1" class="tw-px-4 tw-text-active-blue">
421                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
422            </div>
423    
424            <div data-subnav-target="1" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
425    <div>
426        <div class="tw-wrapper tw-space-y-5">
427            <div class="">
428                <button data-subnav-trigger="1" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
429                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
430                </button>
431            </div>
432            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Take Action</div>
433        </div>
434
435        <ul class="tw-wrapper tw-grid tw-my-5">
436            
437        <li>
438    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
439        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/get-involved">
440            Get Involved
441        </a>
442                    <button data-subnav-trigger="1114" class="tw-px-4 tw-text-active-blue">
443                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
444            </div>
445    
446            <div data-subnav-target="1114" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
447    <div>
448        <div class="tw-wrapper tw-space-y-5">
449            <div class="">
450                <button data-subnav-trigger="1114" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
451                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
452                </button>
453            </div>
454            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Get Involved</div>
455        </div>
456
457        <ul class="tw-wrapper tw-grid tw-my-5">
458            
459        <li>
460    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
461        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/get-involved/faith">
462            Faith Programs
463        </a>
464            </div>
465    
466    </li>            
467        <li>
468    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
469        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/get-involved/fundraise">
470            Fundraise
471        </a>
472            </div>
473    
474    </li>    </ul>    </div>
475
476    <div class="tw-mt-10 tw-py-5 tw-border-t">
477        <div class="tw-wrapper tw-text-center">
478            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
479                <span>Need Help?</span>
480                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
481        </div>
482    </div>
483</div>    </li>            
484        <li>
485    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
486        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give">
487            Give
488        </a>
489                    <button data-subnav-trigger="1139" class="tw-px-4 tw-text-active-blue">
490                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
491            </div>
492    
493            <div data-subnav-target="1139" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
494    <div>
495        <div class="tw-wrapper tw-space-y-5">
496            <div class="">
497                <button data-subnav-trigger="1139" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
498                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
499                </button>
500            </div>
501            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Give</div>
502        </div>
503
504        <ul class="tw-wrapper tw-grid tw-my-5">
505            
506        <li>
507    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
508        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give/monthly">
509            Give Monthly
510        </a>
511            </div>
512    
513    </li>            
514        <li>
515    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
516        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give/one-time">
517            Give One Time
518        </a>
519            </div>
520    
521    </li>            
522        <li>
523    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
524        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give/giving-in-honor">
525            Giving in Honor
526        </a>
527            </div>
528    
529    </li>            
530        <li>
531    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
532        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give/donor-advised-funds">
533            Donor-Advised Funds (DAFs)
534        </a>
535            </div>
536    
537    </li>            
538        <li>
539    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
540        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/give/other-ways-to-give">
541            Other Ways to Give
542        </a>
543            </div>
544    
545    </li>    </ul>    </div>
546
547    <div class="tw-mt-10 tw-py-5 tw-border-t">
548        <div class="tw-wrapper tw-text-center">
549            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
550                <span>Need Help?</span>
551                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
552        </div>
553    </div>
554</div>    </li>            
555        <li>
556    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
557        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners">
558            Partner with Heifer
559        </a>
560                    <button data-subnav-trigger="1115" class="tw-px-4 tw-text-active-blue">
561                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </button>
562            </div>
563    
564            <div data-subnav-target="1115" class="tw-fixed tw-inset-x-0 tw-bottom-0 tw-w-screen tw-flex tw-flex-col tw-justify-between tw-bg-white tw-overflow-y-scroll tw-translate-x-full tw-transition-all tw-duration-300 tw-delay-150 tw-z-50">
565    <div>
566        <div class="tw-wrapper tw-space-y-5">
567            <div class="">
568                <button data-subnav-trigger="1115" class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-extrabold tw-text-active-blue tw-uppercase">
569                    <span aria-hidden="true" class="tw-icon sprite-arrow-left tw-pointer-events-none"></span>                    <span class="tw-pointer-events-none">Back</span>
570                </button>
571            </div>
572            <div class="tw-text-lg tw-font-extrabold tw-text-active-blue tw-uppercase">Partner with Heifer</div>
573        </div>
574
575        <ul class="tw-wrapper tw-grid tw-my-5">
576            
577        <li>
578    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
579        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/companies">
580            Companies
581        </a>
582            </div>
583    
584    </li>            
585        <li>
586    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
587        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/governments">
588            Governments
589        </a>
590            </div>
591    
592    </li>            
593        <li>
594    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
595        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/foundations">
596            Foundations
597        </a>
598            </div>
599    
600    </li>            
601        <li>
602    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
603        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/local-partners">
604            Local Partners
605        </a>
606            </div>
607    
608    </li>            
609        <li>
610    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
611        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/global-institutions">
612            Global Institutions
613        </a>
614            </div>
615    
616    </li>            
617        <li>
618    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
619        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/partners/innovation">
620            Innovation Partners
621        </a>
622            </div>
623    
624    </li>    </ul>    </div>
625
626    <div class="tw-mt-10 tw-py-5 tw-border-t">
627        <div class="tw-wrapper tw-text-center">
628            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
629                <span>Need Help?</span>
630                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
631        </div>
632    </div>
633</div>    </li>            
634        <li>
635    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
636        <a class="tw-text-sm tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/take-action/get-involved/sign-up">
637            Sign Up For Emails
638        </a>
639            </div>
640    
641    </li>    </ul>    </div>
642
643    <div class="tw-mt-10 tw-py-5 tw-border-t">
644        <div class="tw-wrapper tw-text-center">
645            <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
646                <span>Need Help?</span>
647                <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>            </a>
648        </div>
649    </div>
650</div>    </li>            
651        <li>
652    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
653        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/blog">
654            News &amp; Stories
655        </a>
656            </div>
657    
658    </li>            
659        <li>
660    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
661        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/about-us">
662            About Us
663        </a>
664            </div>
665    
666    </li>            
667        <li>
668    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
669        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/about-us/media-center">
670            Media Center
671        </a>
672            </div>
673    
674    </li>            
675        <li>
676    <div class="tw-flex tw-items-center tw-justify-between tw-border-b">
677        <a class="tw-text-xl tw-py-4 tw-text-active-blue tw-uppercase tw-tracking-[1px]" href="/support">
678            Need Help?
679        </a>
680            </div>
681    
682    </li>    </ul>
683            <div class="tw-wrapper">
684                <a class="tw-flex tw-items-center tw-gap-2 tw-text-xs tw-text-active-blue tw-tracking-[1.5px] tw-uppercase" href="https://myaccount.heifer.org/account/index.html">
685                    <span aria-hidden="true" class="tw-icon sprite-account tw-pointer-events-none"></span>                    <span>My Account</span>
686                </a>
687            </div>
688        </div>
689
690        <div class="tw-mt-10 tw-py-5 tw-border-t">
691            <div class="tw-wrapper tw-text-center">
692                <a class="tw-border-b-[3px] tw-border-active-blue tw-text-lg tw-text-active-blue tw-uppercase tw-tracking-[2px]" href="/support">
693                    <span>Need Help?</span>
694                    <span aria-hidden="true" class="tw-icon sprite-arrow-right tw-pointer-events-none"></span>                </a>
695            </div>
696        </div>
697    </div>
698</nav>
699            
700            <a class="nav-logo" href="/">
701                <img src="/images/hfr-logo-navy.svg" alt="Heifer International Logo">
702            </a>
703
704            
705            <button 
706              x-data="CartToggle"
707              x-load
708              @click="openCart"
709              class="col-span-1 tw-flex lg:tw-hidden tw-justify-end"
710              x-bind:aria-label="cartToggleAriaLabel"
711            >
712              <span class="tw-relative tw-size-[18px]">
713                <svg width="19px" height="17px" viewBox="0 0 19 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
714    <g id="Gift-Card" stroke="none" stroke-width="1">
715        <g id="Gift-Card-Landing---Print" transform="translate(-1150.000000, -21.000000)">
716            <g id="Group-14" transform="translate(1150.000000, 20.000000)">
717                <path d="M13.8743152,6.86209961 L10.3669347,1.92578634 C10.1794151,1.66186986 10.241347,1.2959086 10.5052635,1.108389 C10.7691799,0.92086939 11.1351412,0.982801295 11.3226608,1.24671778 L15.2795465,6.81566797 C15.2903168,6.83082627 15.3002643,6.84632119 15.3093978,6.86209961 L18.1723638,6.86209961 C18.496116,6.86209961 18.7585691,7.12455266 18.7585691,7.44830489 L18.7585691,9.79312603 C18.7585691,10.1168783 18.496116,10.3793313 18.1723638,10.3793313 L17.4178124,10.3793313 L16.6124,15.9884529 C16.4466369,17.1428746 15.4576461,18 14.2913842,18 L4.46718488,18 C3.30092298,18 2.31193215,17.1428746 2.14616904,15.9884529 L1.3407567,10.3793313 L0.586205284,10.3793313 C0.262453045,10.3793313 1.31095135e-12,10.1168783 1.31095135e-12,9.79312603 L1.31095135e-12,7.44830489 C1.31095135e-12,7.12455266 0.262453045,6.86209961 0.586205284,6.86209961 L3.30261993,6.86209961 C3.31175346,6.84632119 3.32170091,6.83082627 3.33247128,6.81566797 L7.28935695,1.24671778 C7.47687655,0.982801295 7.84283781,0.92086939 8.10675429,1.108389 C8.37067077,1.2959086 8.43260268,1.66186986 8.24508307,1.92578634 L4.73770259,6.86209961 L13.8743152,6.86209961 Z M16.2333771,10.3793313 L2.52519199,10.3793313 L3.30667696,15.8218159 C3.38955851,16.3990267 3.88405393,16.8275894 4.46718488,16.8275894 L14.2913842,16.8275894 C14.8745151,16.8275894 15.3690106,16.3990267 15.4518921,15.8218159 L16.2333771,10.3793313 Z M17.5861585,9.20692075 L17.5861585,8.03451018 L1.17241057,8.03451018 L1.17241057,9.20692075 L17.5861585,9.20692075 Z M5.86205284,11.5517419 C6.18580507,11.5517419 6.44825812,11.8141949 6.44825812,12.1379472 L6.44825812,15.0689736 C6.44825812,15.3927258 6.18580507,15.6551789 5.86205284,15.6551789 C5.5383006,15.6551789 5.27584755,15.3927258 5.27584755,15.0689736 L5.27584755,12.1379472 C5.27584755,11.8141949 5.5383006,11.5517419 5.86205284,11.5517419 Z M12.8965162,11.5517419 C13.2202685,11.5517419 13.4827215,11.8141949 13.4827215,12.1379472 L13.4827215,15.0689736 C13.4827215,15.3927258 13.2202685,15.6551789 12.8965162,15.6551789 C12.572764,15.6551789 12.310311,15.3927258 12.310311,15.0689736 L12.310311,12.1379472 C12.310311,11.8141949 12.572764,11.5517419 12.8965162,11.5517419 Z M10.5516951,11.5517419 C10.8754473,11.5517419 11.1379004,11.8141949 11.1379004,12.1379472 L11.1379004,15.0689736 C11.1379004,15.3927258 10.8754473,15.6551789 10.5516951,15.6551789 C10.2279429,15.6551789 9.96548982,15.3927258 9.96548982,15.0689736 L9.96548982,12.1379472 C9.96548982,11.8141949 10.2279429,11.5517419 10.5516951,11.5517419 Z M8.20687397,11.5517419 C8.53062621,11.5517419 8.793
71707925,11.8141949 8.79307925,12.1379472 L8.79307925,15.0689736 C8.79307925,15.3927258 8.53062621,15.6551789 8.20687397,15.6551789 C7.88312173,15.6551789 7.62066869,15.3927258 7.62066869,15.0689736 L7.62066869,12.1379472 C7.62066869,11.8141949 7.88312173,11.5517419 8.20687397,11.5517419 Z" id="Combined-Shape" fill="currentColor"></path>
718            </g>
719        </g>
720    </g>
721</svg>                <span
722                  x-show="cartHasItems"
723                  x-text="itemsInCart"
724                  x-cloak
725                  class="tw-font-extrabold tw-text-xs tw-leading-none tw-flex tw-items-center tw-justify-center tw-absolute tw-top-0 tw-right-0 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-bg-rich-orange tw-text-white tw-transform tw-translate-x-1/2 tw--translate-y-[0.1875rem]"
726                  aria-hidden="true"
727                  ></span>
728              </span>
729            </button>
730        </div>
731
732        
733        <nav
734    aria-label="Main Desktop Navigation"
735    x-data="Nav"
736    x-load
737    x-init="initDesktop"
738    class="tw-hidden lg:tw-block"
739>
740    <ul class="tw-flex tw-flex-wrap tw-items-center tw-gap-y-4">
741                                    <li class="tw-mr-4 xl:tw-mr-8" data-subnav-trigger="1152">
742                    <div class="tw-relative">
743    <a class="js-subnav-link tw-font-libre-baskerville tw-text-xl tw-text-soil-brown tw-decoration-rich-orange tw-decoration-[3px] tw-underline-offset-[5px] tw-tracking-[-1px] tw-transition-all tw-duration-300  hover:tw-text-active-blue hover:tw-underline" href="/our-work">
744        Our Work
745    </a>
746    
747            <div data-subnav-target="1152" class="tw-hidden tw-absolute tw-w-max tw-m-0 tw-pt-8 tw-px-6 tw-pb-6 tw-bg-white tw-z-50 tw-shadow-lg">
748    <ul class="tw-grid tw-grid-cols-1 tw-gap-8">
749                    <li>
750                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/our-work/approach">
751                    Our Approach
752                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
753                
754                            </li>
755                    <li>
756                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/our-work/focus-areas">
757                    Our Focus Areas
758                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
759                
760                                    <div class="tw-mt-3">
761                        <ul class="tw-space-y-2">
762                                                            <li>
763                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/our-work/focus-areas/work-and-income">
764                                        Work and Income
765                                    </a>
766                                </li>
767                                                            <li>
768                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/our-work/focus-areas/women-and-inclusion">
769                                        Women and Inclusion
770                                    </a>
771                                </li>
772                                                            <li>
773                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/our-work/focus-areas/climate-and-environment">
774                                        Climate and Environment
775                                    </a>
776                                </li>
777                                                            <li>
778                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/our-work/focus-areas/food-security">
779                                        Food Security
780                                    </a>
781                                </li>
782                                                            <li>
783                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/our-work/focus-areas/one-health">
784                                        One Health
785                                    </a>
786                                </li>
787                                                    </ul>
788                    </div>
789                            </li>
790                    <li>
791                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/our-work/where-we-work">
792                    Where We Work
793                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
794                
795                            </li>
796                    <li>
797                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/our-work/programs">
798                    Our Programs
799                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
800                
801                            </li>
802            </ul>
803</div>    </div>                </li>
804                            <li class="tw-mr-4 xl:tw-mr-8" data-subnav-trigger="60">
805                    <div class="tw-relative">
806    <a class="js-subnav-link tw-font-libre-baskerville tw-text-xl tw-text-soil-brown tw-decoration-rich-orange tw-decoration-[3px] tw-underline-offset-[5px] tw-tracking-[-1px] tw-transition-all tw-duration-300  hover:tw-text-active-blue hover:tw-underline" href="/take-action">
807        Take Action
808    </a>
809    
810            <div data-subnav-target="60" class="tw-hidden tw-absolute tw-w-max tw-m-0 tw-pt-8 tw-px-6 tw-pb-6 tw-bg-white tw-z-50 tw-shadow-lg">
811    <ul class="tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-8">
812                    <li>
813                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/take-action/get-involved">
814                    Get Involved
815                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
816                
817                                    <div class="tw-mt-3">
818                        <ul class="tw-space-y-2">
819                                                            <li>
820                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/get-involved/faith">
821                                        Faith Programs
822                                    </a>
823                                </li>
824                                                            <li>
825                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/get-involved/fundraise">
826                                        Fundraise
827                                    </a>
828                                </li>
829                                                    </ul>
830                    </div>
831                            </li>
832                    <li>
833                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/give">
834                    Give
835                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
836                
837                                    <div class="tw-mt-3">
838                        <ul class="tw-space-y-2">
839                                                            <li>
840                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/give/monthly">
841                                        Give Monthly
842                                    </a>
843                                </li>
844                                                            <li>
845                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/give/one-time">
846                                        Give One Time
847                                    </a>
848                                </li>
849                                                            <li>
850                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/give/giving-in-honor">
851                                        Giving in Honor
852                                    </a>
853                                </li>
854                                                            <li>
855                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/give/donor-advised-funds">
856                                        Donor-Advised Funds (DAFs)
857                                    </a>
858                                </li>
859                                                            <li>
860                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/give/other-ways-to-give">
861                                        Other Ways to Give
862                                    </a>
863                                </li>
864                                                    </ul>
865                    </div>
866                            </li>
867                    <li>
868                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/take-action/partners">
869                    Partner with Heifer
870                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
871                
872                                    <div class="tw-mt-3">
873                        <ul class="tw-space-y-2">
874                                                            <li>
875                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/companies">
876                                        Companies
877                                    </a>
878                                </li>
879                                                            <li>
880                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/governments">
881                                        Governments
882                                    </a>
883                                </li>
884                                                            <li>
885                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/foundations">
886                                        Foundations
887                                    </a>
888                                </li>
889                                                            <li>
890                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/local-partners">
891                                        Local Partners
892                                    </a>
893                                </li>
894                                                            <li>
895                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/global-institutions">
896                                        Global Institutions
897                                    </a>
898                                </li>
899                                                            <li>
900                                    <a class="tw-py-2 tw-text-sm hover:tw-text-active-blue hover:tw-underline" href="/take-action/partners/innovation">
901                                        Innovation Partners
902                                    </a>
903                                </li>
904                                                    </ul>
905                    </div>
906                            </li>
907                    <li>
908                <a class="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-extrabold tw-py-2 tw-text-active-blue tw-uppercase tw-tracking-[2px] hover:tw-text-grand-blue" href="/take-action/get-involved/sign-up">
909                    Sign Up For Emails
910                    <span aria-hidden="true" class="tw-icon sprite-chevron-right-mask tw-bg-active-blue"></span>                </a>
911                
912                            </li>
913            </ul>
914</div>    </div>                </li>
915                            <li class="tw-mr-4 xl:tw-mr-8" data-subnav-trigger="3260">
916                    <div class="tw-relative">
917    <a class="js-subnav-link tw-font-libre-baskerville tw-text-xl tw-text-soil-brown tw-decoration-rich-orange tw-decoration-[3px] tw-underline-offset-[5px] tw-tracking-[-1px] tw-transition-all tw-duration-300  hover:tw-text-active-blue hover:tw-underline" href="/blog">
918        News &amp; Stories
919    </a>
920    
921    </div>                </li>
922                            
923        <li class="tw-mr-2 xl:tw-mr-4">
924            <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-bg-grand-blue tw-border-grand-blue tw-font-normal tw-text-white" href="/give/donate-monthly" target="_self">
925                Donate
926    </a>
927        </li>
928        <li>
929            <a class="button__base tw-group tw-bg-white focus:tw-bg-alert-red hover:tw-bg-alert-red tw-border-alert-red focus:tw-border-alert-red hover:tw-border-alert-red tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-alert-red focus:tw-text-white hover:tw-text-white tw-text-center tw-uppercase tw-tracking-widest tw-pr-5 tw-pl-8 tw-py-2 tw-text-sm" href="/give/gift-catalog/monthly-giving">
930                <span class="group-focus:tw-text-white group-hover:tw-text-white tw-absolute tw-top-0 tw-start-0 tw-w-9 tw-h-9 tw-text-4xl tw-text-alert-red">
931                    <svg width="36px" height="36px" viewBox="0 0 28 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
932                        <g stroke="none" stroke-width="1">
933                            <path fill="currentColor" d="M28,0 L3.739,33 L-0.001,33 L8.43269462,21.5300145 C7.7112256,22.0228581 7.03585694,22.3761062 6.40133679,22.5903518 C3.83959119,23.4553245 1.92732041,22.1163381 1.19494483,19.2498894 C0.479737492,16.4506356 1.38700446,14.3044002 3.85784552,13.4701214 C5.51579826,12.9103141 7.85354093,12.9699604 10.939426,13.5986298 C9.48663646,11.1378127 8.73101371,9.12050165 8.69253818,7.47904497 C8.63142643,4.87187369 10.3379244,3.2852659 13.2129778,2.99993977 C16.1570457,2.70776451 18.0693165,4.04675093 18.1326766,6.74984246 C18.1458009,7.30975501 18.0773459,7.92976116 17.9280363,8.61286587 L24.259,0 L28,0 Z M4.80079624,16.3259876 C3.96761613,16.6073106 3.75638603,17.1069976 4.10820573,18.4839866 L4.20260793,18.8283636 C4.4991596,19.8262165 4.78680341,19.9612453 5.45838607,19.7344856 C6.42284138,19.4088375 7.76995233,18.3972351 9.43789732,16.706658 L9.70391426,16.4340833 L9.33074723,16.3685654 C7.24889007,16.0177504 5.72471891,16.0140253 4.80079624,16.3259876 Z M13.4896585,5.99946372 C12.0753827,6.13981931 11.6780755,6.5092137 11.6986827,7.38836505 C11.72019,8.30591863 12.1863278,9.62747182 13.1095613,11.3107256 L13.2880272,11.6305641 L13.4772246,11.9588179 L13.6423778,11.6156178 C14.6605299,9.47005075 15.1503861,7.85819213 15.1265321,6.84052238 C15.1081732,6.05729128 14.8349199,5.86595725 13.4896585,5.99946372 Z"></path>
934                        </g>
935                    </svg>
936                </span>
937                Gift Catalog
938            </a>
939        </li>
940    </ul>
941</nav>    </div>
942
943    
944    <nav aria-label="Call to Action Mobile Navigation" class="tw-block lg:tw-hidden" id="nav-mobile-ctas">
945        <ul class="tw-flex tw-gap-4">
946            <li class="tw-flex-auto">
947                <a class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base tw-hidden tw-w-full md:tw-block" href="/give/donate-monthly" target="_self">
948                Donate
949    </a>
950                <a class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-block tw-w-full md:tw-hidden" href="/give/donate-monthly" target="_self">
951                Donate
952    </a>
953            </li>
954            <li class="tw-flex-auto">
955                <a class="button__base tw-bg-alert-red tw-border-alert-red tw-font-montserrat tw-group tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-pr-5 tw-pl-8 tw-py-2 tw-relative tw-size-auto tw-text-white tw-text-sm tw-text-center tw-tracking-widest tw-uppercase tw-w-full focus:tw-bg-white focus:tw-border-alert-red focus:tw-alert-red hover:tw-bg-white hover:tw-border-alert-red hover:tw-text-alert-red md:tw-py-4 md:tw-text-base" href="/give/gift-catalog/monthly-giving">
956                  <span class="group-focus:tw-text-alert-red group-hover:tw-text-alert-red tw-absolute tw-top-0 tw-start-0 tw-text-4xl tw-text-white tw-size-9 md:tw-size-14">
957                      <svg class="tw-size-9 md:tw-size-14" viewBox="0 0 28 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
958                          <g stroke="none" stroke-width="1">
959                              <path fill="currentColor" d="M28,0 L3.739,33 L-0.001,33 L8.43269462,21.5300145 C7.7112256,22.0228581 7.03585694,22.3761062 6.40133679,22.5903518 C3.83959119,23.4553245 1.92732041,22.1163381 1.19494483,19.2498894 C0.479737492,16.4506356 1.38700446,14.3044002 3.85784552,13.4701214 C5.51579826,12.9103141 7.85354093,12.9699604 10.939426,13.5986298 C9.48663646,11.1378127 8.73101371,9.12050165 8.69253818,7.47904497 C8.63142643,4.87187369 10.3379244,3.2852659 13.2129778,2.99993977 C16.1570457,2.70776451 18.0693165,4.04675093 18.1326766,6.74984246 C18.1458009,7.30975501 18.0773459,7.92976116 17.9280363,8.61286587 L24.259,0 L28,0 Z M4.80079624,16.3259876 C3.96761613,16.6073106 3.75638603,17.1069976 4.10820573,18.4839866 L4.20260793,18.8283636 C4.4991596,19.8262165 4.78680341,19.9612453 5.45838607,19.7344856 C6.42284138,19.4088375 7.76995233,18.3972351 9.43789732,16.706658 L9.70391426,16.4340833 L9.33074723,16.3685654 C7.24889007,16.0177504 5.72471891,16.0140253 4.80079624,16.3259876 Z M13.4896585,5.99946372 C12.0753827,6.13981931 11.6780755,6.5092137 11.6986827,7.38836505 C11.72019,8.30591863 12.1863278,9.62747182 13.1095613,11.3107256 L13.2880272,11.6305641 L13.4772246,11.9588179 L13.6423778,11.6156178 C14.660
9595299,9.47005075 15.1503861,7.85819213 15.1265321,6.84052238 C15.1081732,6.05729128 14.8349199,5.86595725 13.4896585,5.99946372 Z"></path>
960                          </g>
961                      </svg>
962                  </span>
963                  Gift Catalog
964              </a>
965            </li>
966        </ul>
967    </nav>
968
969  </div>
970</header>
971
972
973        <main>
974                          
975      
975<script type="application/ld+json">
976      {
977        "@context": "https://schema.org",
978        "@type": "Organization",
979        "url": "https://www.heifer.org/",
980        "sameAs": [
981          "https://www.facebook.com/heiferinternational", 
982          "https://www.instagram.com/heiferinternational/",
983          "https://www.linkedin.com/company/heifer-international/",
984          "https://x.com/Heifer",
985          "https://www.tiktok.com/@heiferinternational",
986          "https://www.youtube.com/@HeiferInternational",
987          "https://www.pinterest.com/heiferint/"
988        ],
989        "logo": "https://media-refresh.heifer.org/wp-content/uploads/logo-navy.svg",
990        "name": "Heifer International",
991        "description": "Heifer International is a development organization working to end hunger and poverty around the world",
992        "email": "[email protected]",
993        "telephone": "+1-855-948-6437",
994        "address": {
995          "@type": "PostalAddress",
996          "streetAddress": "1 World Ave.",
997          "addressLocality": "Little Rock",
998          "addressCountry": "US",
999          "addressRegion": "AR",
1000          "postalCode": "72202"
1001        }
1002      }
1003    </script>
1003
1004  
1005          
1006      
1007      
1008    
1009          
1010              <section class="tw-overflow-hidden tw-relative theme--dark md:tw-overlay-left" id="hero-donation-6abe1b463e16b" data-block="hero-donation">
1011        
1012    <div class="theme--cultivate-green tw-bg-theme-background tw-bg-theme-background md:tw-wrapper md:tw-bg-transparent md:tw-py-[120px]">
1013
1014        
1015        <div class="tw-block tw-pb-24 tw-relative md:tw-hidden">
1016            
1017            
1018                            <figure class="tw-overlay-radial tw-relative">
1019                    <picture
1020  x-data="PreloadImage"
1021  x-load
1022  class="tw-absolute tw-size-full tw-inset-0 md:tw-hidden"
1023>
1024  <span
1025    data-image-fallback
1026    aria-hidden="true"
1027    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
1028  ></span>
1029    <img
1030    alt="A woman&#039;s hands tend her crop of tomatoes." loading="eager" fetchpriority="high" class="tw-opacity-0 tw-object-cover tw-size-full"
1031    x-ref="preloadedImage"
1032    srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.46 480w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.49&amp;fp-y=0.46 960w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1024&amp;h=683&amp;fp-x=0.49&amp;fp-y=0.46 1024w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1536&amp;h=1025&amp;fp-x=0.49&amp;fp-y=0.46 1536w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1936&amp;h=1291&amp;fp-x=0.49&amp;fp-y=0.46 1936w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2048&amp;h=1366&amp;fp-x=0.49&amp;fp-y=0.46 2048w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2560&amp;h=1708&amp;fp-x=0.49&amp;fp-y=0.46 2560w"
1033    sizes="(min-width: 1536px) 100vw, (min-width: 1024px) 100vw, (min-width: 768px) 100vw, 100vw"
1034    src="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.46"
1035    style=""
1036  />
1037</picture>                </figure>
1038            
1039            <div class="tw-pt-10 tw-relative tw-wrapper tw-z-10 md:tw-pt-0">
1040                <h1 class="tw-text-h1 tw-text-theme-color">
1041        Your Gift <strong>3X Matched</strong> + Get a Free Hat!
1042            </h1 >            </div>
1043        </div>
1044
1045        
1046        <div class="tw-grid md:tw-grid-cols-12">
1047                            <picture
1048  x-data="PreloadImage"
1049  x-load
1050  class="tw-relative md:tw-absolute md:tw-inset-0"
1051>
1052  <span
1053    data-image-fallback
1054    aria-hidden="true"
1055    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
1056  ></span>
1057                  <source media="(min-width: 1536px)"
1058        srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1936&amp;h=807&amp;fp-x=0.49&amp;fp-y=0.46 1936w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2560&amp;h=1068&amp;fp-x=0.49&amp;fp-y=0.46 2560w"
1059        sizes="(min-width: 1536px) 100vw, (min-width: 1024px) 100vw, (min-width: 768px) 100vw, 100vw"
1060      />
1061                <source media="(min-width: 1024px)"
1062        srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1536&amp;h=768&amp;fp-x=0.49&amp;fp-y=0.46 1536w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2560&amp;h=1280&amp;fp-x=0.49&amp;fp-y=0.46 2560w"
1063        sizes="(min-width: 1536px) 100vw, (min-width: 1024px) 100vw, (min-width: 768px) 100vw, 100vw"
1064      />
1065                <source media="(min-width: 768px)"
1066        srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1024&amp;h=683&amp;fp-x=0.49&amp;fp-y=0.46 1024w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2048&amp;h=1366&amp;fp-x=0.49&amp;fp-y=0.46 2048w"
1067        sizes="(min-width: 1536px) 100vw, (min-width: 1024px) 100vw, (min-width: 768px) 100vw, 100vw"
1068      />
1069        <img
1070    alt="A woman&#039;s hands tend her crop of tomatoes." loading="eager" fetchpriority="high" class="tw-opacity-0 tw-hidden tw-h-full tw-object-cover tw-w-full lg:tw-block"
1071    x-ref="preloadedImage"
1072    srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.46 480w, https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.49&amp;fp-y=0.46 960w"
1073    sizes="(min-width: 1536px) 100vw, (min-width: 1024px) 100vw, (min-width: 768px) 100vw, 100vw"
1074    src="https://media-refresh.heifer.org/wp-content/uploads/NG202402-286-1.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.46"
1075    style=""
1076  />
1077</picture>            
1078            <div class="tw-py-8 tw-relative tw-px-wrapper-sm tw-z-10 md:tw-px-0 md:tw-col-span-6 md:tw-self-start md:tw-py-0 md:tw-mt-0 xl:tw-col-span-7">
1079                <div class="tw-hidden md:tw-block theme--dark">
1080                    <h1 class="tw-text-h1 tw-text-theme-color">
1081        Your Gift <strong>3X Matched</strong> + Get a Free Hat!
1082            </h1 >        <div class="wysiwyg">
1083        <div style="padding: 15px;">
1084<h4 class="tw-text-h3">Since 1944, Heifer has supported farmers and their communities, helping more than 59 million families rise out of hunger and poverty.</h4>
1085<p>For a limited time, your donation will be matched <strong class="tw-font-extrabold">3X</strong>!</p>
1086<p>When you donate $20 each month, you’ll receive a <strong class="tw-font-extrabold">FREE Kindness Hat</strong> to show your support!</p>
1087</div>
1088<p>&nbsp;</p>
1089<p><a class="button__base button__primary" href="/campaign/kindness-hat?isource=HIMGG26FR0002" data-size="default"><strong class="tw-font-extrabold">Learn More</strong></a></p>
1090    </div>
1091                  </div>
1092
1093                
1094                <div class="md:tw-hidden">
1095                    <div class="wysiwyg">
1096        <div style="padding: 15px;">
1097<h4 class="tw-text-h3">Since 1944, Heifer has supported farmers and their communities, helping more than 59 million families rise out of hunger and poverty.</h4>
1098<p>For a limited time, your donation will be matched <strong class="tw-font-extrabold">3X</strong>!</p>
1099<p>When you donate $20 each month, you’ll receive a <strong class="tw-font-extrabold">FREE Kindness Hat</strong> to show your support!</p>
1100</div>
1101<p>&nbsp;</p>
1102<p><a class="button__base button__primary" href="/campaign/kindness-hat?isource=HIMGG26FR0002" data-size="default"><strong class="tw-font-extrabold">Learn More</strong></a></p>
1103    </div>
1104                  </div>
1105            </div>
1106
1107            <div class="tw-flex tw-justify-center tw-order-first -tw-mt-12 tw-px-wrapper-sm tw-z-10 md:tw-px-0 md:tw-mt-0 md:tw-order-none md:tw-col-span-6 xl:tw-col-span-5">
1108                <div 
1109    x-data="DonationCheckout" 
1110    x-load
1111    data-frequency="monthly"
1112    data-steps="{&quot;one-time&quot;:[1,2,3,4],&quot;monthly&quot;:[1,2,3],&quot;yearly&quot;:[1,2,3],&quot;free&quot;:[1,3]}"
1113    class="tw-max-w-md tw-w-full"
1114>
1115    <div
1116    x-data="MultistepForm" 
1117    x-load
1118    x-ref="form"
1119    id="multistepForm-6abe1b463ec41"
1120    data-frequency=monthly
1121    data-steps=&quot;&quot;
1122    data-payment-method="credit-card"
1123    data-payment-processor=blackbaud
1124    class="theme--clarity-white tw-bg-theme-background tw-border-[3px] tw-border-vista-blue"
1125>
1126    
1127    <template x-teleport="body">
1128        <div 
1129            x-show="showProcessingOverlay"
1130            class="tw-bg-black/[.8] tw-flex tw-fixed tw-h-full tw-justify-center tw-items-center tw-left-0 tw-top-0 tw-w-full tw-z-50"
1131        >
1132            <div class="tw-text-center tw-text-white"> 
1133                <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-white tw-text-4xl"></span>                <p class="tw-mt-2">
1134                    Success!
1135                </p>
1136                <p class="tw-mt-2 tw-text-base">
1137                    Please be patient while we send you to a confirmation page.
1138                </p>
1139            </div>
1140        </div>
1141    </template>
1142    <div class="tw-flex tw-flex-col tw-h-full  tw-overflow-visible">
1143        <div class="form__header tw-relative">
1144            
1145            <div 
1146                x-show="hasErrors"
1147                x-cloak
1148                class="form__errors tw-bg-alert-red tw-p-2 tw-text-sm tw-text-white"
1149            >
1150                <p class="tw-mt-[14px]">We are unable to process your request. Please try again, or view common solutions on <a href="/support/troubleshooting" class="link__inline tw-text-white" target="_blank">our help page.</a> You can also contact our Donor Services team at 855.9HUNGER (855.948.6437).</p>
1151            </div>
1152            
1153                            <nav aria-label="Multistep Form Navigation" class="form__navigation tw-flex tw-font-bold tw-gap-x-2 tw-justify-between tw-flex tw-px-4 tw-py-3 tw-items-center tw-text-sm">
1154                    
1155                                            <button x-show="isNotFirstStep" x-cloak @click="prevStep" class="tw-flex tw-flex-1 tw-justify-start">
1156                            <span class="tw-sr-only">Previous Step</span>
1157                            <span aria-hidden="true" class="tw-icon sprite-back-arrow-form-mask tw-text-xl tw-bg-clarity-white"></span>                        </button>
1158                    
1159                    
1160                    <div class="tw-uppercase tw-bold" x-text="stepTitle"></div>
1161
1162                    
1163                    <ul class="tw-flex tw-flex-1 tw-gap-x-2 tw-justify-end">
1164                        <template x-for="i in getSteps">
1165                            <li
1166                                class="form__navigation--bullet"
1167                                :data-step="i"
1168                                x-effect="isActive">
1169                            </li>
1170                        </template>
1171                    </ul>
1172                </nav>
1173                                        <div 
1174    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
1175    x-show="showSummary"
1176    x-cloak
1177    data-summary-step="1" 
1178    data-summary-title="Your Donation Amount" 
1179    data-summary-name="product"
1180>
1181            <div class="tw-mr-[10px]">
1182            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
1183        <div class="tw-flex tw-flex-col tw-flex-1">
1184                    <div class="tw-font-bold">Your Donation Amount</div>
1185                <template x-if="isMonthly">
1186                    <div>
1187                        <span x-text="totalDollarAmount"></span><abbr title="per month" class="tw-no-underline">/mo</abbr>
1188                    </div>
1189                </template>
1190                <template x-if="isYearly">
1191                    <div>
1192                        <span x-text="totalDollarAmount"></span><abbr title="per year" class="tw-no-underline">/yr</abbr>
1193                    </div>
1194                </template>
1195                <template x-if="isOnetime">
1196                    <div>
1197                        <span x-text="totalDollarAmount"></span>
1198                    </div>
1199                </template>
1200                <div x-show="hasProcessingFee" class="tw-text-xs">includes <span x-text="processingFeeDollarAmount"></span> to cover payment processing costs.</div>
1201    </div>
1202    </div>            <div x-show="isGivingInHonor">
1203                <div 
1204    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
1205    x-show="showSummary"
1206    x-cloak
1207    data-summary-step="1" 
1208    data-summary-title="Give in Honor" 
1209    data-summary-name="Give in Honor"
1210>
1211            <div class="tw-mr-[10px]">
1212            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
1213        <div class="tw-flex tw-flex-col tw-flex-1">
1214                    <div class="tw-font-bold">
1214Give in Honor</div>
1215                <div class="tw-text-xs">
1216                    You&apos;ll have the opportunity to fill out a free card after your donation
1217                </div>
1218    </div>
1219    </div>            </div>
1220                            <div 
1221    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
1222    x-show="showSummary"
1223    x-cloak
1224    data-summary-step="3" 
1225    data-summary-title="Details" 
1226    data-summary-name="billing"
1227>
1228            <div class="tw-mr-[10px]">
1229            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
1230        <div class="tw-flex tw-flex-col tw-flex-1">
1231                    <div class="tw-font-bold">Details</div>
1232                <div>
1233                        <div>
1234                            <span data-summary-value="firstName"></span>
1235                            <span data-summary-value="lastName"></span>
1236                        </div>
1237                        <div data-summary-value="email"></div>
1238                        <div>
1239                            <span data-summary-value="address1"></span>
1240                            <span data-summary-value="address2"></span>
1241                            <span data-summary-value="city"></span>,
1242                            <span data-summary-value="state"></span>
1243                            <span data-summary-value="zipcode"></span>
1244                        </div>
1245                    </div>
1246    </div>
1247    </div>
1248                    </div>
1249        <div class="form__body tw-h-full tw-text-theme-color">
1250            <form
1251  @submit.prevent="nextStep"
1252  x-show="isCurrentStep"
1253  data-step=1
1254  data-name="product"
1255  data-title="Your Gift"
1256  :data-current-step="isCurrentStep"
1257  class="tw-h-full"
1258  
1259>
1260  <div class="tw-pb-[30px] tw-px-[30px]">    
1261    <input type="hidden" name="_token" value="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_4p3JBiCAM6B9L7iA_wrap"  style="display: none" aria-hidden="true">
1262        <input id="voight-kampff_4p3JBiCAM6B9L7iA"
1263               name="voight-kampff_4p3JBiCAM6B9L7iA"
1264               type="text"
1265               value=""
1266                              autocomplete="nope"
1267               tabindex="-1">
1268        <input name="valid_from"
1269               type="text"
1270               value="eyJpdiI6IlNaMzJwamVvbG82aFBjaTJ6Nnd1V1E9PSIsInZhbHVlIjoiVDBvZmlvT2VNWEgrelVYOVlUMGlxZz09IiwibWFjIjoiNzg5Zjk2YWEwYTUzOTQ3NTQwZmI1YWM5ZjllOWQ3NjZlMWViZmZkMjQyNTYwYjdiNzcyMzM2Y2MzYjAxZmU3ZSIsInRhZyI6IiJ9"
1271                              autocomplete="off"
1272               tabindex="-1">
1273    </div>
1274                <input type="hidden" name="msource" value="">
1275<input type="hidden" name="isource" value="">
1276<input type="hidden" name="utm_campaign" value="">
1277<input type="hidden" name="utm_source" value="">
1278<input type="hidden" name="utm_medium" value="">
1279<input type="hidden" name="utm_term" value="">
1280<input type="hidden" name="utm_content" value="">
1281            <input type="hidden" name="lr_id" value="">
1282            
1283                            <div 
1284    x-data="SwitchToggle" 
1285    x-load
1286    x-cloak
1287    role="tablist" 
1288    data-default="monthly"
1289    class="tw-rounded-[50px] tw-text-clarity-white tw-flex tw-list-none tw-my-6 tw-bg-vista-blue-light tw-flex tw-list-none tw-my-6"
1290>
1291            <div class="tw-basis-1/2 tw-order-1">
1292            <a @click.prevent="updateFrequency" href="#donation-yearly" role="tab"
1293                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="yearly" x-ref="yearly" data-toggle
1294            >
1295                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isYearly" x-cloak="x-cloak"></span>                Annually
1296            </a>
1297        </div>
1298                        <div class="tw-basis-1/2 tw-order-1">
1299            <a @click.prevent="updateFrequency" href="#donation-one-time" role="tab"
1300                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="one-time" x-ref="one-time" data-toggle
1301            >
1302                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isOnetime" x-cloak="x-cloak"></span>                One&nbsp;Time
1303            </a>
1304        </div>
1305                <div class="tw-basis-1/2 ">
1306            <a @click.prevent="updateFrequency" href="#donation-monthly" role="tab"
1307                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold is-active tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="monthly" x-ref="monthly" data-toggle
1308            >
1309                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isMonthly" x-cloak="x-cloak"></span>                Monthly
1310            </a>
1311        </div>
1312    </div>
1313
1314                <fieldset class="tw-pt-[15px]">
1315                    
1316                                            <template x-if="isOnetime">
1317                            <div>
1318                                <legend class="tw-sr-only">One-time Amounts</legend>
1319                                <div 
1320    x-data="DonationProduct" 
1321    x-load
1322    data-product-amount="280"
1323    data-product-sku="600888081WMNLP" 
1324    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
1325    data-product-is-monthly="0"
1326    data-product-is-yearly="0"
1327    data-product-is-custom-amount="0"
1328    data-product-quantity="1"
1329    data-product-price="50"
1330    data-product-type="gift_catalog_donation"
1331    data-product-is-matched="0" 
1332    data-product-match-amount="0"
1333    >
1334    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;Become a monthly donor and we&#039;ll send you a &lt;strong&gt;FREE gift&lt;\/strong&gt;!&quot;,&quot;matched&quot;:&quot;We&#039;ll send you a &lt;strong&gt;FREE hat&lt;\/strong&gt;!&quot;,&quot;value&quot;:&quot;&lt;strong&gt;Increase your monthly donation&lt;\/strong&gt;, and as a heartfelt thank-you, we&#039;ll send you a FREE gift!&quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
1335        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" data-state="default">
1336                            <div class="" data-premium-lightbox>
1337                    <div x-data="LightboxImage" x-load data-gallery='false'>
1338  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b463f433-lightbox">
1339    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
1340    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
1341      <span class="tw-sr-only">Enlarge image</span>
1342      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
1343  </figure>
1344
1345  <dialog
1346    x-ref="dialog"
1347    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
1348    x-trap.noscroll="dialogOpen"
1349  >
1350          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
1351        
1352        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
1353
1354          
1355          <img
1356            x-ref="mainImage"
1357            loading="lazy"
1358            alt="Cultivate a Kinder World Hat"
1359            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
1360            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
1361          />
1362
1363          
1364          <button
1365            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
1366            type="button"
1367            x-on:click="close"
1368          >
1369            <span class="tw-sr-only">Close dialog</span>
1370            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
1371
1372        </div>
1373
1374        
1375        
1376        <button
1377          x-show="hasMultiple"
1378          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1379          type="button"
1380          x-on:click="prev"
1381        >
1382          <span class="tw-sr-only">Previous image</span>
1383          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
1384
1385        
1386        <button
1387          x-show="hasMultiple"
1388          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1389          type="button"
1390          x-on:click="next"
1391        >
1392          <span class="tw-sr-only">Next image</span>
1393          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
1394
1395      </figure>
1396      </dialog>
1397</div>                </div>
1398                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
1399                Become a monthly donor and we'll send you a <strong>FREE gift</strong>!
1400            </p>
1401            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
1402                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
1403        </div>
1404                            </div>
1405            <div 
1406  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
1407>
1408  <div class="tw-relative" x-data="FormElement" x-load>
1409    <label class="form__radio-button" for="amount-6abe1b463f68b">
1410        <input 
1411            type="radio" 
1412            id="amount-6abe1b463f68b" 
1413            name="amount" 
1414            value="625" 
1415            class="tw-sr-only"
1416            
1417            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1418            x-ref="element"
1419        />
1420        $625
1421    </label>
1422</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1423    <label class="form__radio-button" for="amount-6abe1b463f6e2">
1424        <input 
1425            type="radio" 
1426            id="amount-6abe1b463f6e2" 
1427            name="amount" 
1428            value="280" 
1429            class="tw-sr-only"
1430            checked
1431            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1432            x-ref="element"
1433        />
1434        $280
1435    </label>
1436</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1437    <label class="form__radio-button" for="amount-6abe1b463f70d">
1438        <input 
1439            type="radio" 
1440            id="amount-6abe1b463f70d" 
1441            name="amount" 
1442            value="175" 
1443            class="tw-sr-only"
1444            
1445            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1446            x-ref="element"
1447        />
1448        $175
1449    </label>
1450</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1451    <label class="form__radio-button" for="amount-6abe1b463f731">
1452        <input 
1453            type="radio" 
1454            id="amount-6abe1b463f731" 
1455            name="amount" 
1456            value="75" 
1457            class="tw-sr-only"
1458            
1459            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1460            x-ref="element"
1461        />
1462        $75
1463    </label>
1464</div>                        <div 
1465    x-data="CustomAmountRadioButton" 
1466    x-load
1467    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1468>
1469    <div 
1470        x-ref="radio-button"
1471        x-show="isRadioButtonActive"
1472    >
1473        <div class="tw-relative" x-data="FormElement" x-load>
1474    <label class="form__radio-button" for="amount-6abe1b463f7ac">
1475        <input 
1476            type="radio" 
1477            id="amount-6abe1b463f7ac" 
1478            name="amount" 
1479            value="other" 
1480            class="tw-sr-only"
1481            
1482            required="required"
1483            x-ref="element"
1484        />
1485        Other
1486    </label>
1487</div>    </div>
1488    <div x-data="FormElement" x-load>
1489        <label 
1490            x-cloak
1491            x-show="isCustomAmountActive"
1492            x-effect="handleActiveState"
1493            class="form__radio-button"
1494            for="custom-amount-6abe1b463f75c"
1495        >
1496            <input 
1497                @click.outside="handleOutsideClick"
1498                @input="updateRadioValue"
1499                @keydown.tab="handleTabKey"
1500                @keydown.left="handleLeftKey"
1501                id="custom-amount-6abe1b463f75c"
1502                name="custom-amount"
1503                required
1504                x-on:blur="handleBlur"
1505                x-ref="element"
1506                type="number"
1507                step="0.01"
1508                class="tw-bg-transparent tw-border-none tw-w-full"
1509                min="10"
1510            >
1511            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b463f7cf" x-text="errorText"></div>
1512                </label>
1513    </div>
1514</div>
1515</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
1516                        <div x-html="amountMessage"></div>
1517        </div>
1518        
1519    <input type="hidden" name="products" :value="productsJSON">
1520    <input type="hidden" name="store_id" value="12">   
1521    <input type="hidden" name="referrer" value="/">   
1522    <input type="hidden" name="banner_id" value="">   
1523
1524    
1525    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
1526        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;One Time&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;280&quot;,&quot;sku&quot;:&quot;600888081WMNLP&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
1527    </div>  
1528</div>
1529                            </div>
1530                        </template>
1531                    
1532                    
1533                                            <template x-if="isMonthly">
1534                            <div>
1535                                <legend class="tw-sr-only">Monthly Amounts</legend>
1536                                <div 
1537    x-data="DonationProduct" 
1538    x-load
1539    data-product-amount="40"
1540    data-product-sku="600888081WMNLPm" 
1541    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
1542    data-product-is-monthly="1"
1543    data-product-is-yearly="0"
1544    data-product-is-custom-amount="0"
1545    data-product-quantity="1"
1546    data-product-price="50"
1547    data-product-type="gift_catalog_donation"
1548    data-product-is-matched="0" 
1549    data-product-match-amount="0"
1550    >
1551    <div data-match-amount="20" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;Become a monthly donor and we&#039;ll send you a &lt;strong&gt;FREE gift&lt;\/strong&gt;!&quot;,&quot;matched&quot;:&quot;We&#039;ll send you a &lt;strong&gt;FREE hat&lt;\/strong&gt;!&quot;,&quot;value&quot;:&quot;&lt;strong&gt;Increase your monthly donation&lt;\/strong&gt;, and as a heartfelt thank-you, we&#039;ll send you a FREE gift!&quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
1552        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
1553                            <div class="" data-premium-lightbox>
1554                    <div x-data="LightboxImage" x-load data-gallery='false'>
1555  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b463f8d5-lightbox">
1556    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
1557    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
1558      <span class="tw-sr-only">Enlarge image</span>
1559      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
1560  </figure>
1561
1562  <dialog
1563    x-ref="dialog"
1564    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
1565    x-trap.noscroll="dialogOpen"
1566  >
1567          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
1568        
1569        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
1570
1571          
1572          <img
1573            x-ref="mainImage"
1574            loading="lazy"
1575            alt="Cultivate a Kinder World Hat"
1576            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
1577            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
1578          />
1579
1580          
1581          <button
1582            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
1583            type="button"
1584            x-on:click="close"
1585          >
1586            <span class="tw-sr-only">Close dialog</span>
1587            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
1588
1589        </div>
1590
1591        
1592        
1593        <button
1594          x-show="hasMultiple"
1595          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1596          type="button"
1597          x-on:click="prev"
1598        >
1599          <span class="tw-sr-only">Previous image</span>
1600          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
1601
1602        
1603        <button
1604          x-show="hasMultiple"
1605          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1606          type="button"
1607          x-on:click="next"
1608        >
1609          <span class="tw-sr-only">Next image</span>
1610          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
1611
1612      </figure>
1613      </dialog>
1614</div>                </div>
1615                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
1616                We'll send you a <strong>FREE hat</strong>!
1617            </p>
1618            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
1619                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
1620        </div>
1621                    <input name="premium" type="hidden" value="{&quot;amount&quot;:0,&quot;is_monthly&quot;:0,&quot;is_yearly&quot;:0,&quot;quantity&quot;:1,&quot;sku&quot;:&quot;69.RUWRLDCAP26&quot;,&quot;title&quot;:&quot;Cultivate Kindness Hat&quot;,&quot;type&quot;:&quot;premium&quot;,&quot;uuid&quot;:&quot;21fd2706-1c5d-4fb3-860d-e8c8b08f2516&quot;,&quot;is_matched_product&quot;:0,&quot;match_amount&quot;:0}" x-ref="premium-product" data-premium-product />
1622            <input name="premium-threshold" type="hidden" value="20" x-ref="premium-threshold" />
1623                            </div>
1624            <div 
1625  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
1626>
1627  <div class="tw-relative" x-data="FormElement" x-load>
1628    <label class="form__radio-button" for="amount-6abe1b463fa80">
1629        <input 
1630            type="radio" 
1631            id="amount-6abe1b463fa80" 
1632            name="amount" 
1633            value="75" 
1634            class="tw-sr-only"
1635            
1636            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1637            x-ref="element"
1638        />
1639        $75<abbr title="per month" class="tw-no-underline">/mo</abbr>
1640    </label>
1641</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1642    <label class="form__radio-button" for="amount-6abe1b463faaf">
1643        <input 
1644            type="radio" 
1645            id="amount-6abe1b463faaf" 
1646            name="amount" 
1647            value="40" 
1648            class="tw-sr-only"
1649            checked
1650            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1651            x-ref="element"
1652        />
1653        $40<abbr title="per month" class="tw-no-underline">/mo</abbr>
1654    </label>
1655</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1656    <label class="form__radio-button" for="amount-6abe1b463fad5">
1657        <input 
1658            type="radio" 
1659            id="amount-6abe1b463fad5" 
1660            name="amount" 
1661            value="30" 
1662            class="tw-sr-only"
1663            
1664            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1665            x-ref="element"
1666        />
1667        $30<abbr title="per month" class="tw-no-underline">/mo</abbr>
1668    </label>
1669</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1670    <label class="form__radio-button" for="amount-6abe1b463faf8">
1671        <input 
1672            type="radio" 
1673            id="amount-6abe1b463faf8" 
1674            name="amount" 
1675            value="20" 
1676            class="tw-sr-only"
1677            
1678            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1679            x-ref="element"
1680        />
1681        $20<abbr title="per month" class="tw-no-underline">/mo</abbr>
1682    </label>
1683</div>                        <div 
1684    x-data="CustomAmountRadioButton" 
1685    x-load
1686    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1687>
1688    <div 
1689        x-ref="radio-button"
1690        x-show="isRadioButtonActive"
1691    >
1692        <div class="tw-relative" x-data="FormElement" x-load>
1693    <label class="form__radio-button" for="amount-6abe1b463fb44">
1694        <input 
1695            type="radio" 
1696            id="amount-6abe1b463fb44" 
1697            name="amount" 
1698            value="other" 
1699            class="tw-sr-only"
1700            
1701            required="required"
1702            x-ref="element"
1703        />
1704        Other
1705    </label>
1706</div>    </div>
1707    <div x-data="FormElement" x-load>
1708        <label 
1709            x-cloak
1710            x-show="isCustomAmountActive"
1711            x-effect="handleActiveState"
1712            class="form__radio-button"
1713            for="custom-amount-6abe1b463fb1a"
1714        >
1715            <input 
1716                @click.outside="handleOutsideClick"
1717                @input="updateRadioValue"
1718                @keydown.tab="handleTabKey"
1719                @keydown.left="handleLeftKey"
1720                id="custom-amount-6abe1b463fb1a"
1721                name="custom-amount"
1722                required
1723                x-on:blur="handleBlur"
1724                x-ref="element"
1725                type="number"
1726                step="0.01"
1727                class="tw-bg-transparent tw-border-none tw-w-full"
1728                min="10"
1729            >
1730            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b463fb62" x-text="errorText"></div>
1731                </label>
1732    </div>
1733</div>
1734</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
1735                        <div x-html="amountMessage"></div>
1736        </div>
1737        
1738    <input type="hidden" name="products" :value="productsJSON">
1739    <input type="hidden" name="store_id" value="17">   
1740    <input type="hidden" name="referrer" value="/">   
1741    <input type="hidden" name="banner_id" value="">   
1742
1743    
1744    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
1745        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;Monthly&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;40&quot;,&quot;sku&quot;:&quot;600888081WMNLPm&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
1746    </div>  
1747</div>
1748                            </div>
1749                        </template>
1750                    
1751                    
1752                                            <template x-if="isYearly">
1753                            <div>
1754                                <legend class="tw-sr-only">Yearly Amounts</legend>
1755                                <div 
1756    x-data="DonationProduct" 
1757    x-load
1758    data-product-amount="375"
1759    data-product-sku="600888081WMNLPy" 
1760    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
1761    data-product-is-monthly="0"
1762    data-product-is-yearly="1"
1763    data-product-is-custom-amount="0"
1764    data-product-quantity="1"
1765    data-product-price="50"
1766    data-product-type="gift_catalog_donation"
1767    data-product-is-matched="0" 
1768    data-product-match-amount="0"
1769    >
1770    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;Become a monthly donor and we&#039;ll send you a &lt;strong&gt;FREE gift&lt;\/strong&gt;!&quot;,&quot;matched&quot;:&quot;We&#039;ll send you a &lt;strong&gt;FREE hat&lt;\/strong&gt;!&quot;,&quot;value&quot;:&quot;&lt;strong&gt;Increase your monthly donation&lt;\/strong&gt;, and as a heartfelt thank-you, we&#039;ll send you a FREE gift!&quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
1771        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" data-state="default">
1772                            <div class="" data-premium-lightbox>
1773                    <div x-data="LightboxImage" x-load data-gallery='false'>
1774  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b463fc54-lightbox">
1775    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
1776    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
1777      <span class="tw-sr-only">Enlarge image</span>
1778      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
1779  </figure>
1780
1781  <dialog
1782    x-ref="dialog"
1783    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
1784    x-trap.noscroll="dialogOpen"
1785  >
1786          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
1787        
1788        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
1789
1790          
1791          <img
1792            x-ref="mainImage"
1793            loading="lazy"
1794            alt="Cultivate a Kinder World Hat"
1795            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
1796            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
1797          />
1798
1799          
1800          <button
1801            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
1802            type="button"
1803            x-on:click="close"
1804          >
1805            <span class="tw-sr-only">Close dialog</span>
1806            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
1807
1808        </div>
1809
1810        
1811        
1812        <button
1813          x-show="hasMultiple"
1814          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1815          type="button"
1816          x-on:click="prev"
1817        >
1818          <span class="tw-sr-only">Previous image</span>
1819          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
1820
1821        
1822        <button
1823          x-show="hasMultiple"
1824          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
1825          type="button"
1826          x-on:click="next"
1827        >
1828          <span class="tw-sr-only">Next image</span>
1829          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
1830
1831      </figure>
1832      </dialog>
1833</div>                </div>
1834                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
1835                Become a monthly donor and we'll send you a <strong>FREE gift</strong>!
1836            </p>
1837            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
1838                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
1839        </div>
1840                            </div>
1841            <div 
1842  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
1843>
1844  <div class="tw-relative" x-data="FormElement" x-load>
1845    <label class="form__radio-button" for="amount-6abe1b463fdd5">
1846        <input 
1847            type="radio" 
1848            id="amount-6abe1b463fdd5" 
1849            name="amount" 
1850            value="625" 
1851            class="tw-sr-only"
1852            
1853            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1854            x-ref="element"
1855        />
1856        $625<abbr title="per year" class="tw-no-underline">/yr</abbr>
1857    </label>
1858</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1859    <label class="form__radio-button" for="amount-6abe1b463fe14">
1860        <input 
1861            type="radio" 
1862            id="amount-6abe1b463fe14" 
1863            name="amount" 
1864            value="375" 
1865            class="tw-sr-only"
1866            checked
1867            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1868            x-ref="element"
1869        />
1870        $375<abbr title="per year" class="tw-no-underline">/yr</abbr>
1871    </label>
1872</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1873    <label class="form__radio-button" for="amount-6abe1b463fe3c">
1874        <input 
1875            type="radio" 
1876            id="amount-6abe1b463fe3c" 
1877            name="amount" 
1878            value="225" 
1879            class="tw-sr-only"
1880            
1881            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1882            x-ref="element"
1883        />
1884        $225<abbr title="per year" class="tw-no-underline">/yr</abbr>
1885    </label>
1886</div>                            <div class="tw-relative" x-data="FormElement" x-load>
1887    <label class="form__radio-button" for="amount-6abe1b463fe5f">
1888        <input 
1889            type="radio" 
1890            id="amount-6abe1b463fe5f" 
1891            name="amount" 
1892            value="175" 
1893            class="tw-sr-only"
1894            
1895            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1896            x-ref="element"
1897        />
1898        $175<abbr title="per year" class="tw-no-underline">/yr</abbr>
1899    </label>
1900</div>                        <div 
1901    x-data="CustomAmountRadioButton" 
1902    x-load
1903    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
1904>
1905    <div 
1906        x-ref="radio-button"
1907        x-show="isRadioButtonActive"
1908    >
1909        <div class="tw-relative" x-data="FormElement" x-load>
1910    <label class="form__radio-button" for="amount-6abe1b463feac">
1911        <input 
1912            type="radio" 
1913            id="amount-6abe1b463feac" 
1914            name="amount" 
1915            value="other" 
1916            class="tw-sr-only"
1917            
1918            required="required"
1919            x-ref="element"
1920        />
1921        Other
1922    </label>
1923</div>    </div>
1924    <div x-data="FormElement" x-load>
1925        <label 
1926            x-cloak
1927            x-show="isCustomAmountActive"
1928            x-effect="handleActiveState"
1929            class="form__radio-button"
1930            for="custom-amount-6abe1b463fe82"
1931        >
1932            <input 
1933                @click.outside="handleOutsideClick"
1934                @input="updateRadioValue"
1935                @keydown.tab="handleTabKey"
1936                @keydown.left="handleLeftKey"
1937                id="custom-amount-6abe1b463fe82"
1938                name="custom-amount"
1939                required
1940                x-on:blur="handleBlur"
1941                x-ref="element"
1942                type="number"
1943                step="0.01"
1944                class="tw-bg-transparent tw-border-none tw-w-full"
1945                min="10"
1946            >
1947            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b463fecb" x-text="errorText"></div>
1948                </label>
1949    </div>
1950</div>
1951</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
1952                        <div x-html="amountMessage"></div>
1953        </div>
1954        
1955    <input type="hidden" name="products" :value="productsJSON">
1956    <input type="hidden" name="store_id" value="19">   
1957    <input type="hidden" name="referrer" value="/">   
1958    <input type="hidden" name="banner_id" value="">   
1959
1960    
1961    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
1962        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;Yearly&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;375&quot;,&quot;sku&quot;:&quot;600888081WMNLPy&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
1963    </div>  
1964</div>
1965                            </div>
1966                        </template>
1967
1968                        
1969                                            
1970
1971                    <input type="hidden" name="productUUID" value="b2821458-c5b7-11e9-a667-784f43611243" />
1972                    <div data-blackbaud>
1973                        <input type="hidden" name="blackbaudPublicKey" value="40ba8fee-b267-4567-b0db-8cac71cc1abf" />
1974<input type="hidden" name="blackbaudPaymentConfigurationId" value="5001b34e-4cc5-43ee-a7d6-f09b9a1d33a3" />                    </div>
1975                </fieldset>
1976          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-flex-row-reverse tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:tw-bg-[var(--button-primary-color)] [&_.tw-icon]:hover:tw-bg-[var(--button-primary-color-hover)]" type="submit">
1977                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white"></span>                Next
1978                    <span class="loader"></span>
1979            </button>
1980      </div>
1981</form>
1982                    <form
1983  @submit.prevent="nextStep"
1984  x-show="isCurrentStep"
1985  data-step=2
1986  data-name="payment-options"
1987  data-title="Payment Type"
1988  :data-current-step="isCurrentStep"
1989  class="tw-h-full"
1990  
1991>
1992  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
1993    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;Become a monthly donor and we&#039;ll send you a &lt;strong&gt;FREE gift&lt;\/strong&gt;!&quot;,&quot;matched&quot;:&quot;We&#039;ll send you a &lt;strong&gt;FREE hat&lt;\/strong&gt;!&quot;,&quot;value&quot;:&quot;&lt;strong&gt;Increase your monthly donation&lt;\/strong&gt;, and as a heartfelt thank-you, we&#039;ll send you a FREE gift!&quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mt-6" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
1994        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
1995                            <div class="" data-premium-lightbox>
1996                    <div x-data="LightboxImage" x-load data-gallery='false'>
1997  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b46400d5-lightbox">
1998    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
1999    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
2000      <span class="tw-sr-only">Enlarge image</span>
2001      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
2002  </figure>
2003
2004  <dialog
2005    x-ref="dialog"
2006    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
2007    x-trap.noscroll="dialogOpen"
2008  >
2009          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
2010        
2011        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
2012
2013          
2014          <img
2015            x-ref="mainImage"
2016            loading="lazy"
2017            alt="Cultivate a Kinder World Hat"
2018            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
2019            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
2020          />
2021
2022          
2023          <button
2024            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
2025            type="button"
2026            x-on:click="close"
2027          >
2028            <span class="tw-sr-only">Close dialog</span>
2029            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
2030
2031        </div>
2032
2033        
2034        
2035        <button
2036          x-show="hasMultiple"
2037          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
2038          type="button"
2039          x-on:click="prev"
2040        >
2041          <span class="tw-sr-only">Previous image</span>
2042          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
2043
2044        
2045        <button
2046          x-show="hasMultiple"
2047          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
2048          type="button"
2049          x-on:click="next"
2050        >
2051          <span class="tw-sr-only">Next image</span>
2052          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
2053
2054      </figure>
2055      </dialog>
2056</div>                </div>
2057                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
2058                Become a monthly donor and we'll send you a <strong>FREE gift</strong>!
2059            </p>
2060            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
2061                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
2062        </div>
2063                            </div>
2064                <div class="form__processing-checkbox">
2065    <div class="tw-flex tw-gap-1 tw-items-center">
2066        <div class="tw-relative">
2067            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
2068    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" id="processingFeeToggle-6abe1b463ec41" x-on:change="toggleProcessingFee">
2069    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-size-4">
2070        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
2071    <label for="processingFeeToggle-6abe1b463ec41" class="tw-ml-2 tw-text-xs">
2072        <template x-if="isOnetime">
2073                    <span>
2074                        Contribute <span x-text="processingFeeDollarAmount"></span> to cover your transaction costs.
2075                    </span>
2076                </template>
2077                <template x-if="isMonthly">
2078                    <span>
2079                        Contribute <span x-text="processingFeeDollarAmount"></span> each month to cover your transaction costs.
2080                    </span>
2081                </template>
2082                <template x-if="isYearly">
2083                    <span>
2084                        Contribute <span x-text="processingFeeDollarAmount"></span> each year to cover your transaction costs.
2085                    </span>
2086                </template>
2087    </label>
2088    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="processingFeeToggle-6abe1b463ec41--error" x-text="errorText"></div>
2089</div>        </div>
2090        <span class="tw-relative" x-data="Tooltip" x-load x-on:click.outside="handleOutsideClick">
2091  <button
2092    aria-label="Info about processing fee." 
2093    type="button"
2094    class="tw-flex"
2095    x-on:mouseenter="showTooltip"
2096    x-on:mouseleave="hideTooltip"
2097    x-on:click="toggleTooltip"
2098    x-ref="tooltip-button"
2099  >
2100    <span aria-hidden="true" class="tw-icon sprite-question-mask tw-bg-black text-base"></span>  </button>
2101  <p class="tooltip tw-absolute tw-bg-clarity-white tw-text-black tw-left-1/2 tw-p-4 tw-shadow-xl tw-text-center tw-text-xs -tw-top-5 tw-transform -tw-translate-x-1/2 -tw-translate-y-full tw-w-48 tw-z-10 " x-cloak x-show="isTooltipActive"
2102          x-transition:enter="tw-transition tw-ease-in-out tw-duration-300"
2103          x-transition:enter-start="tw-opacity-0"
2104          x-transition:enter-end="tw-opacity-100"
2105          x-transition:leave="tw-transition tw-ease-in-out tw-duration-300"
2106          x-transition:leave-start="tw-opacity-100"
2107          x-transition:leave-end="tw-opacity-0"
2108      >
2109    <template x-if="isOnetime">
2110                <span>
2111                    Covering the transaction fee helps offset processing and administrative fees that we incur through taking payments online.
2112                </span>
2113            </template>
2114            <template x-if="isMonthly">
2115                <span>
2116                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
2117                </span>
2118            </template>
2119            <template x-if="isYearly">
2120                <span>
2121                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
2122                </span>
2123            </template>
2124  </p>
2125</span>
2126        <template x-if="showProcessingFee">
2127            <input type="hidden" name="processingFee" :value="processingFee">
2128        </template>
2129        <input type="hidden" name="coverProcessingFee" :value="hasProcessingFee" value="0">
2130    </div>
2131</div>
2132                <hr class="tw-border-t tw-border-t-soil-brown tw-mt-8" />
2133                <div x-show="isRecurring" class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" aria-hidden="true">
2134    <div class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</div>
2135</div>
2136
2137<fieldset class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" x-show="isOnetime">
2138    <legend class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</legend>
2139    
2140        
2141        
2142                            <div 
2143                @click="submitForm"
2144                data-payment-method="apple-pay"
2145                class="apple-pay-button apple-pay-button-black tw-cursor-pointer tw-rounded-none tw-h-[50px] tw-w-full"
2146                hidden
2147            >
2148                
2149                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
2150                    <input type="hidden" x-ref="paymentRef" value="apple-pay">
2151                </div>
2152            </div>
2153            
2154                    <div>
2155                <button 
2156                    @click="submitForm"    
2157                    class="tw-bg-black tw-min-h-[50px] tw-w-full" 
2158                    aria-label="Google Pay" 
2159                    type="button"
2160                    data-payment-method="google-pay"
2161                >
2162                    <span aria-hidden="true" class="tw-icon sprite-google-pay-mark tw-text-[50px]"></span>                </button>
2163                
2164                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
2165                    <input type="hidden" x-ref="paymentRef" value="google-pay">
2166                </div>
2167            </div>
2168        
2169        
2170                    
2171        
2172        
2173                    <button 
2174                @click="submitForm"   
2175                class="venmo-button tw-hidden tw-h-[50px] tw-w-full tw-bg-[#008CFF]"
2176                type="button"
2177                data-payment-method="venmo"
2178            >
2179                <div class="tw-h-[50px] tw-pb-0 tw-mb-0 tw-overflow-hidden">
2180                    <div class="tw-h-[50px]">
2181                        <span aria-hidden="true" class="tw-icon sprite-venmo-white tw-text-[120px] tw-object-top tw-overflow-hidden tw-height-[100px] tw--mt-8"></span>                    </div>
2182                </div>
2183            </button>
2184                    
2185        
2186                    <div
2187                class="paypal-button tw-min-h-[50px] tw-w-full" 
2188                type="button">
2189                
2190                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
2191                    <input type="hidden" x-ref="paymentRef" value="paypal">
2192                </div>
2193            </div>
2194        
2195                    </fieldset>
2196                
2197                <div x-data="DataLayer" x-load="visible" x-init="viewDonationFormStart">
2198                    <input type="hidden" x-ref="currentPageUrlRef" value="/">
2199                </div>
2200          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-6 tw-py-2 tw-text-sm tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:tw-bg-[var(--button-primary-color)] [&_.tw-icon]:hover:tw-bg-[var(--button-primary-color-hover)]" type="submit">
2201                    <span aria-hidden="true" class="tw-icon sprite-credit-card-mask tw-bg-clarity-white"></span>                Credit Card
2202                    <span class="loader"></span>
2203            </button>
2204      </div>
2205</form>
2206            <form
2207  @submit.prevent="nextStep"
2208  x-show="isCurrentStep"
2209  data-step=3
2210  data-name="billing"
2211  data-title="Your Info"
2212  :data-current-step="isCurrentStep"
2213  class="tw-h-full"
2214  
2215>
2216  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
2217    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;Become a monthly donor and we&#039;ll send you a &lt;strong&gt;FREE gift&lt;\/strong&gt;!&quot;,&quot;matched&quot;:&quot;We&#039;ll send you a &lt;strong&gt;FREE hat&lt;\/strong&gt;!&quot;,&quot;value&quot;:&quot;&lt;strong&gt;Increase your monthly donation&lt;\/strong&gt;, and as a heartfelt thank-you, we&#039;ll send you a FREE gift!&quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-my-6" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
2218        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
2219                            <div class="" data-premium-lightbox>
2220                    <div x-data="LightboxImage" x-load data-gallery='false'>
2221  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b46405ec-lightbox">
2222    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
2223    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
2224      <span class="tw-sr-only">Enlarge image</span>
2225      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
2226  </figure>
2227
2228  <dialog
2229    x-ref="dialog"
2230    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
2231    x-trap.noscroll="dialogOpen"
2232  >
2233          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
2234        
2235        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
2236
2237          
2238          <img
2239            x-ref="mainImage"
2240            loading="lazy"
2241            alt="Cultivate a Kinder World Hat"
2242            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
2243            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
2244          />
2245
2246          
2247          <button
2248            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
2249            type="button"
2250            x-on:click="close"
2251          >
2252            <span class="tw-sr-only">Close dialog</span>
2253            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
2254
2255        </div>
2256
2257        
2258        
2259        <button
2260          x-show="hasMultiple"
2261          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
2262          type="button"
2263          x-on:click="prev"
2264        >
2265          <span class="tw-sr-only">Previous image</span>
2266          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
2267
2268        
2269        <button
2270          x-show="hasMultiple"
2271          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
2272          type="button"
2273          x-on:click="next"
2274        >
2275          <span class="tw-sr-only">Next image</span>
2276          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
2277
2278      </figure>
2279      </dialog>
2280</div>                </div>
2281                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
2282                Become a monthly donor and we'll send you a <strong>FREE gift</strong>!
2283            </p>
2284            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
2285                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
2286        </div>
2287                            </div>
2288                <fieldset class="form__fieldset">
2289    <legend>Your Information</legend>
2290    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="firstName-6abe1b463ec41">
2291  <label class="form__label" for="firstName-6abe1b463ec41" 
2292  >
2293    First Name<span x-show="required">*</span>
2294  </label>
2295  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="given-name" id="firstName-6abe1b463ec41" name="firstName" placeholder="" required="required" />
2296
2297<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2298  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="firstName-6abe1b463ec41--error" x-text="errorText"></div>
2299  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="lastName-6abe1b463ec41">
2300  <label class="form__label" for="lastName-6abe1b463ec41" 
2301  >
2302    Last Name<span x-show="required">*</span>
2303  </label>
2304  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="family-name" id="lastName-6abe1b463ec41" name="lastName" placeholder="" required="required" />
2305
2306<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2307  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="lastName-6abe1b463ec41--error" x-text="errorText"></div>
2308  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="email-6abe1b463ec41">
2309  <label class="form__label" for="email-6abe1b463ec41" 
2310  >
2311    Email<span x-show="required">*</span>
2312  </label>
2313  <input class="form__element" type="email" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="email" id="email-6abe1b463ec41" name="email" placeholder="Ex: [email protected]" required="required" />
2314
2315<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2316  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="email-6abe1b463ec41--error" x-text="errorText"></div>
2317  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="phone-6abe1b463ec41">
2318  <label class="form__label" for="phone-6abe1b463ec41" 
2319  >
2320    Phone (Optional)<span x-show="required">*</span>
2321  </label>
2322  <input class="form__element" type="phone" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="tel" id="phone-6abe1b463ec41" name="phone" placeholder="Ex: 123-456-7890" />
2323
2324<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
2324d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2325  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="phone-6abe1b463ec41--error" x-text="errorText"></div>
2326  </div>    
2327    <label for="phone-opt-in-6abe1b463ec41">
2328        <div class="tw-mt-4">
2329            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
2330    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" name="phone_opt_in" id="phone-opt-in-6abe1b463ec41">
2331    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo tw-mb-auto tw-mt-1 tw-border-2 tw-size-4">
2332        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
2333    <label for="phone-opt-in-6abe1b463ec41" class="tw-ml-2 tw-text-sm">
2334        <span class="wysiwyg">
2335                By providing your mobile phone number you agree that Heifer may contact you by phone and/or text message regarding Heifer news and updates. You can opt-out at any time. See 
2336                <a href="/privacy-policy" target="_blank" class="tw-relative tw-z-10">privacy policy</a>
2337                for details.        
2338            </span>
2339    </label>
2340    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="phone-opt-in-6abe1b463ec41--error" x-text="errorText"></div>
2341</div>        </div>
2342    </label>
2343</fieldset>                <fieldset class="form__fieldset">
2344    <legend x-show="isNotFree">Billing Information</legend>
2345    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address1-6abe1b463ec41">
2346  <label class="form__label" for="address1-6abe1b463ec41" 
2347  >
2348    Address 1<span x-show="required">*</span>
2349  </label>
2350  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="address1-6abe1b463ec41" name="address1" placeholder="Address 1" required="required" />
2351
2352<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2353  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address1-6abe1b463ec41--error" x-text="errorText"></div>
2354  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address2-6abe1b463ec41">
2355  <label class="form__label" for="address2-6abe1b463ec41" 
2356  >
2357    Address 2<span x-show="required">*</span>
2358  </label>
2359  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="address2-6abe1b463ec41" name="address2" placeholder="Address 2" />
2360
2361<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2362  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address2-6abe1b463ec41--error" x-text="errorText"></div>
2363  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="city-6abe1b463ec41">
2364  <label class="form__label" for="city-6abe1b463ec41" 
2365  >
2366    City<span x-show="required">*</span>
2367  </label>
2368  <input class="form__element" type="city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="city-6abe1b463ec41" name="city" placeholder="City" required="required" />
2369
2370<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
2370d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2371  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="city-6abe1b463ec41--error" x-text="errorText"></div>
2372  </div>    <div x-data="StateSelect" x-load data-target="state">
2373      <template x-if="showAU">
2374      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-AU-6abe1b463ec41">
2375  <label class="form__label" for="state-AU-6abe1b463ec41" 
2376  >
2377    State<span x-show="required">*</span>
2378  </label>
2379  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-AU-6abe1b463ec41" name="state" required="required">
2380      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
2381      <option label="New South Wales" value="NSW" >New South Wales</option>
2382      <option label="Northern Territory" value="NT" >Northern Territory</option>
2383      <option label="Queensland" value="QLD" >Queensland</option>
2384      <option label="South Australia" value="SA" >South Australia</option>
2385      <option label="Tasmania" value="TAS" >Tasmania</option>
2386      <option label="Victoria" value="VIC" >Victoria</option>
2387      <option label="Western Australia" value="WA" >Western Australia</option>
2388  </select>
2389  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-AU-6abe1b463ec41--error" x-text="errorText"></div>
2390  </div>    </template>
2391      <template x-if="showCA">
2392      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-CA-6abe1b463ec41">
2393  <label class="form__label" for="state-CA-6abe1b463ec41" 
2394  >
2395    Province<span x-show="required">*</span>
2396  </label>
2397  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-CA-6abe1b463ec41" name="state" required="required">
2398      <option label="Alberta" value="AB" >Alberta</option>
2399      <option label="British Columbia" value="BC" >British Columbia</option>
2400      <option label="Manitoba" value="MB" >Manitoba</option>
2401      <option label="New Brunswick" value="NB" >New Brunswick</option>
2402      <option label="Newfoundland" value="NF" >Newfoundland</option>
2403      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
2404      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
2405      <option label="Nunavut" value="NU" >Nunavut</option>
2406      <option label="Ontario" value="ON" >Ontario</option>
2407      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
2408      <option label="Quebec" value="QC" >Quebec</option>
2409      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
2410      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
2411  </select>
2412  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-CA-6abe1b463ec41--error" x-text="errorText"></div>
2413  </div>    </template>
2414      <template x-if="showUS">
2415      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-US-6abe1b463ec41">
2416  <label class="form__label" for="state-US-6abe1b463ec41" 
2417  >
2418    State<span x-show="required">*</span>
2419  </label>
2420  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-US-6abe1b463ec41" name="state" required="required">
2421      <option label="Alabama" value="AL" >Alabama</option>
2422      <option label="Alaska" value="AK" >Alaska</option>
2423      <option label="Arizona" value="AZ" >Arizona</option>
2424      <option label="Arkansas" value="AR" >Arkansas</option>
2425      <option label="California" value="CA" >California</option>
2426      <option label="Colorado" value="CO" >Colorado</option>
2427      <option label="Connecticut" value="CT" >Connecticut</option>
2428      <option label="Delaware" value="DE" >Delaware</option>
2429      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
2430      <option label="Florida" value="FL" >Florida</option>
2431      <option label="Georgia" value="GA" >Georgia</option>
2432      <option label="Hawaii" value="HI" >Hawaii</option>
2433      <option label="Idaho" value="ID" >Idaho</option>
2434      <option label="Illinois" value="IL" >Illinois</option>
2435      <option label="Indiana" value="IN" >Indiana</option>
2436      <option label="Iowa" value="IA" >Iowa</option>
2437      <option label="Kansas" value="KS" >Kansas</option>
2438      <option label="Kentucky" value="KY" >Kentucky</option>
2439      <option label="Louisiana" value="LA" >Louisiana</option>
2440      <option label="Maine" value="ME" >Maine</option>
2441      <option label="Maryland" value="MD" >Maryland</option>
2442      <option label="Massachusetts" value="MA" >Massachusetts</option>
2443      <option label="Michigan" value="MI" >Michigan</option>
2444      <option label="Minnesota" value="MN" >Minnesota</option>
2445      <option label="Mississippi" value="MS" >Mississippi</option>
2446      <option label="Missouri" value="MO" >Missouri</option>
2447      <option label="Montana" value="MT" >Montana</option>
2448      <option label="Nebraska" value="NE" >Nebraska</option>
2449      <option label="Nevada" value="NV" >Nevada</option>
2450      <option label="New Hampshire" value="NH" >New Hampshire</option>
2451      <option label="New Jersey" value="NJ" >New Jersey</option>
2452      <option label="New Mexico" value="NM" >New Mexico</option>
2453      <option label="New York" value="NY" >New York</option>
2454      <option label="North Carolina" value="NC" >North Carolina</option>
2455      <option label="North Dakota" value="ND" >North Dakota</option>
2456      <option label="Ohio" value="OH" >Ohio</option>
2457      <option label="Oklahoma" value="OK" >Oklahoma</option>
2458      <option label="Oregon" value="OR" >Oregon</option>
2459      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
2460      <option label="Rhode Island" value="RI" >Rhode Island</option>
2461      <option label="South Carolina" value="SC" >South Carolina</option>
2462      <option label="South Dakota" value="SD" >South Dakota</option>
2463      <option label="Tennessee" value="TN" >Tennessee</option>
2464      <option label="Texas" value="TX" >Texas</option>
2465      <option label="Utah" value="UT" >Utah</option>
2466      <option label="Vermont" value="VT" >Vermont</option>
2467      <option label="Virginia" value="VA" >Virginia</option>
2468      <option label="Washington" value="WA" >Washington</option>
2469      <option label="West Virginia" value="WV" >West Virginia</option>
2470      <option label="Wisconsin" value="WI" >Wisconsin</option>
2471      <option label="Wyoming" value="WY" >Wyoming</option>
2472  </select>
2473  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-US-6abe1b463ec41--error" x-text="errorText"></div>
2474  </div>    </template>
2475    <template x-if="showOther">
2476    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b463ec41">
2477  <label class="form__label" for="state-other-US-6abe1b463ec41" 
2478  >
2479    State/Province<span x-show="required">*</span>
2480  </label>
2481  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b463ec41" name="state" placeholder="State/Province" selectedOption="" required="required" />
2482
2483<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
2483d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2484  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b463ec41--error" x-text="errorText"></div>
2485  </div>  </template>
2486</div>
2487    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="zipcode-6abe1b463ec41">
2488  <label class="form__label" for="zipcode-6abe1b463ec41" 
2489  >
2490    Zip<span x-show="required">*</span>
2491  </label>
2492  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="zipcode-6abe1b463ec41" name="zipcode" autocomplete="postal-code" autocorrect="off" required="required" />
2493
2494<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2495  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="zipcode-6abe1b463ec41--error" x-text="errorText"></div>
2496  </div>    <div x-data="CountrySelect" x-load data-trigger="state">
2497    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="country-6abe1b463ec41">
2498  <label class="form__label" for="country-6abe1b463ec41" 
2499  >
2500    Country<span x-show="required">*</span>
2501  </label>
2502  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="country-6abe1b463ec41" name="country" required="required">
2503      <option label="United States" value="US" >United States</option>
2504      <option label="Afghanistan" value="AF" >Afghanistan</option>
2505      <option label="Åland Islands" value="AX" >Åland Islands</option>
2506      <option label="Albania" value="AL" >Albania</option>
2507      <option label="Algeria" value="DZ" >Algeria</option>
2508      <option label="American Samoa" value="AS" >American Samoa</option>
2509      <option label="Andorra" value="AD" >Andorra</option>
2510      <option label="Angola" value="AO" >Angola</option>
2511      <option label="Anguilla" value="AI" >Anguilla</option>
2512      <option label="Antarctica" value="AQ" >Antarctica</option>
2513      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
2514      <option label="Argentina" value="AR" >Argentina</option>
2515      <option label="Armenia" value="AM" >Armenia</option>
2516      <option label="Aruba" value="AW" >Aruba</option>
2517      <option label="Australia" value="AU" >Australia</option>
2518      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
2519      <option label="Bahamas" value="BS" >Bahamas</option>
2520      <option label="Bahrain" value="BH" >Bahrain</option>
2521      <option label="Bangladesh" value="BD" >Bangladesh</option>
2522      <option label="Barbados" value="BB" >Barbados</option>
2523      <option label="Belarus" value="BY" >Belarus</option>
2524      <option label="Belize" value="BZ" >Belize</option>
2525      <option label="Benin" value="BJ" >Benin</option>
2526      <option label="Bermuda" value="BM" >Bermuda</option>
2527      <option label="Bhutan" value="BT" >Bhutan</option>
2528      <option label="Bolivia" value="BO" >Bolivia</option>
2529      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
2530      <option label="Botswana" value="BW" >Botswana</option>
2531      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
2532      <option label="Brazil" value="BR" >Brazil</option>
2533      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
2534      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
2535      <option label="Brunei" value="BN" >Brunei</option>
2536      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
2537      <option label="Burundi" value="BI" >Burundi</option>
2538      <option label="Cambodia" value="KH" >Cambodia</option>
2539      <option label="Cameroon" value="CM" >Cameroon</option>
2540      <option label="Canada" value="CA" >Canada</option>
2541      <option label="Cape Verde" value="CV" >Cape Verde</option>
2542      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
2543      <option label="Central African Republic" value="CF" >Central African Republic</option>
2544      <option label="Chad" value="TD" >Chad</option>
2545      <option label="Chile" value="CL" >Chile</option>
2546      <option label="Christmas Island" value="CX" >Christmas Island</option>
2547      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
2548      <option label="Colombia" value="CO" >Colombia</option>
2549      <option label="Comoros" value="KM" >Comoros</option>
2550      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
2551      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
2552      <option label="Cook Islands" value="CK" >Cook Islands</option>
2553      <option label="Costa Rica" value="CR" >Costa Rica</option>
2554      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
2555      <option label="Djibouti" value="DJ" >Djibouti</option>
2556      <option label="Dominica" value="DM" >Dominica</option>
2557      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
2558      <option label="Ecuador" value="EC" >Ecuador</option>
2559      <option label="Egypt" value="EG" >Egypt</option>
2560      <option label="El Salvador" value="SV" >El Salvador</option>
2561      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
2562      <option label="Eritrea" value="ER" >Eritrea</option>
2563      <option label="Ethiopia" value="ET" >Ethiopia</option>
2564      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
2565      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
2566      <option label="Fiji" value="FJ" >Fiji</option>
2567      <option label="French Guiana" value="GF" >French Guiana</option>
2568      <option label="French Polynesia" value="PF" >French Polynesia</option>
2569      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
2570      <option label="Gabon" value="GA" >Gabon</option>
2571      <option label="Gambia" value="GM" >Gambia</option>
2572      <option label="Georgia" value="GE" >Georgia</option>
2573      <option label="Ghana" value="GH" >Ghana</option>
2574      <option label="Gibraltar" value="GI" >Gibraltar</option>
2575      <option label="Greenland" value="GL" >Greenland</option>
2576      <option label="Grenada" value="GD" >Grenada</option>
2577      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
2578      <option label="Guam" value="GU" >Guam</option>
2579      <option label="Guatemala" value="GT" >Guatemala</option>
2580      <option label="Guernsey" value="GG" >Guernsey</option>
2581      <option label="Guinea" value="GN" >Guinea</option>
2582      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
2583      <option label="Guyana" value="GY" >Guyana</option>
2584      <option label="Haiti" value="HT" >Haiti</option>
2585      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
2586      <option label="Honduras" value="HN" >Honduras</option>
2587      <option label="India" value="IN" >India</option>
2588      <option label="Indonesia" value="ID" >Indonesia</option>
2589      <option label="Iraq" value="IQ" >Iraq</option>
2590      <option label="Isle of Man" value="IM" >Isle of Man</option>
2591      <option label="Israel" value="IL" >Israel</option>
2592      <option label="Jamaica" value="JM" >Jamaica</option>
2593      <option label="Japan" value="JP" >Japan</option>
2594      <option label="Jersey" value="JE" >Jersey</option>
2595      <option label="Jordan" value="JO" >Jordan</option>
2596      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
2597      <option label="Kenya" value="KE" >Kenya</option>
2598      <option label="Kiribati" value="KI" >Kiribati</option>
2599      <option label="Kuwait" value="KW" >Kuwait</option>
2600      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
2601      <option label="Laos" value="LA" >Laos</option>
2602      <option label="Lebanon" value="LB" >Lebanon</option>
2603      <option label="Lesotho" value="LS" >Lesotho</option>
2604      <option label="Liberia" value="LR" >Liberia</option>
2605      <option label="Libya" value="LY" >Libya</option>
2606      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
2607      <option label="Macedonia" value="MK" >Macedonia</option>
2608      <option label="Madagascar" value="MG" >Madagascar</option>
2609      <option label="Malawi" value="MW" >Malawi</option>
2610      <option label="Malaysia" value="MY" >Malaysia</option>
2611      <option label="Maldives" value="MV" >Maldives</option>
2612      <option label="Mali" value="ML" >Mali</option>
2613      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
2614      <option label="Martinique" value="MQ" >Martinique</option>
2615      <option label="Mauritania" value="MR" >Mauritania</option>
2616      <option label="Mauritius" value="MU" >Mauritius</option>
2617      <option label="Mayotte" value="YT" >Mayotte</option>
2618      <option label="Mexico" value="MX" >Mexico</option>
2619      <option label="Micronesia" value="FM" >Micronesia</option>
2620      <option label="Moldova" value="MD" >Moldova</option>
2621      <option label="Monaco" value="MC" >Monaco</option>
2622      <option label="Mongolia" value="MN" >Mongolia</option>
2623      <option label="Montenegro" value="ME" >Montenegro</option>
2624      <option label="Montserrat" value="MS" >Montserrat</option>
2625      <option label="Morocco" value="MA" >Morocco</option>
2626      <option label="Mozambique" value="MZ" >Mozambique</option>
2627      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
2628      <option label="Namibia" value="NA" >Namibia</option>
2629      <option label="Nauru" value="NR" >Nauru</option>
2630      <option label="Nepal" value="NP" >Nepal</option>
2631      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
2632      <option label="New Caledonia" value="NC" >New Caledonia</option>
2633      <option label="New Zealand" value="NZ" >New Zealand</option>
2634      <option label="Nicaragua" value="NI" >Nicaragua</option>
2635      <option label="Niger" value="NE" >Niger</option>
2636      <option label="Nigeria" value="NG" >Nigeria</option>
2637      <option label="Niue" value="NU" >Niue</option>
2638      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
2639      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
2640      <option label="Oman" value="OM" >Oman</option>
2641      <option label="Pakistan" value="PK" >Pakistan</option>
2642      <option label="Palau" value="PW" >Palau</option>
2643      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
2644      <option label="Panama" value="PA" >Panama</option>
2645      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
2646      <option label="Paraguay" value="PY" >Paraguay</option>
2647      <option label="Peru" value="PE" >Peru</option>
2648      <option label="Philippines" value="PH" >Philippines</option>
2649      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
2650      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
2651      <option label="Qatar" value="QA" >Qatar</option>
2652      <option label="Réunion" value="RE" >Réunion</option>
2653      <option label="Rwanda" value="RW" >Rwanda</option>
2654      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
2655      <option label="Saint Helena" value="SH" >Saint Helena</option>
2656      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
2657      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
2658      <option label="Saint Martin" value="MF" >Saint Martin</option>
2659      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
2660      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
2661      <option label="Samoa" value="WS" >Samoa</option>
2662      <option label="San Marino" value="SM" >San Marino</option>
2663      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
2664      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
2665      <option label="Senegal" value="SN" >Senegal</option>
2666      <option label="Serbia" value="RS" >Serbia</option>
2667      <option label="Seychelles" value="SC" >Seychelles</option>
2668      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
2669      <option label="Singapore" value="SG" >Singapore</option>
2670      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
2671      <option label="Somalia" value="SO" >Somalia</option>
2672      <option label="South Africa" value="ZA" >South Africa</option>
2673      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
2674      <option label="South Korea" value="KR" >South Korea</option>
2675      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
2676      <option label="Sudan" value="SD" >Sudan</option>
2677      <option label="Suriname" value="SR" >Suriname</option>
2678      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
2679      <option label="Swaziland" value="SZ" >Swaziland</option>
2680      <option label="Switzerland" value="CH" >Switzerland</option>
2681      <option label="Taiwan" value="TW" >Taiwan</option>
2682      <option label="Tajikistan" value="TJ" >Tajikistan</option>
2683      <option label="Tanzania" value="TZ" >Tanzania</option>
2684      <option label="Thailand" value="TH" >Thailand</option>
2685      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
2686      <option label="Togo" value="TG" >Togo</option>
2687      <option label="Tokelau" value="TK" >Tokelau</option>
2688      <option label="Tonga" value="TO" >Tonga</option>
2689      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
2690      <option label="Tunisia" value="TN" >Tunisia</option>
2691      <option label="Turkey" value="TR" >Turkey</option>
2692      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
2693      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
2694      <option label="Tuvalu" value="TV" >Tuvalu</option>
2695      <option label="Uganda" value="UG" >Uganda</option>
2696      <option label="Ukraine" value="UA" >Ukraine</option>
2697      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
2698      <option label="Uruguay" value="UY" >Uruguay</option>
2699      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
2700      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
2701      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
2702      <option label="Vanuatu" value="VU" >Vanuatu</option>
2703      <option label="Vatican City" value="VA" >Vatican City</option>
2704      <option label="Vietnam" value="VN" >Vietnam</option>
2705      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
2706      <option label="Western Sahara" value="EH" >Western Sahara</option>
2707      <option label="Yemen" value="YE" >Yemen</option>
2708      <option label="Zambia" value="ZM" >Zambia</option>
2709      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
2710  </select>
2711  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="country-6abe1b463ec41--error" x-text="errorText"></div>
2712  </div></div>            
2713        <div x-data="DataLayer" x-load="visible" x-init="addShippingInfo">
2714            <input type="hidden" x-ref="productData" :value="productData">
2715        </div>  
2716    </fieldset>                <div x-data="FormFieldsToggle" x-load>
2717    <fieldset class="tw-text-xs tw-mt-7">
2718        <legend class="tw-text-base">I am donating today:</legend>
2719        <div class="tw-gap-4 tw-grid tw-mt-3 sm:tw-grid-cols-2">
2720            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
2721    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="individual" name="buying_on_behalf" id="buying_on_behalf_individual-6abe1b463ec41" checked="checked" @click="hideOnChecked" />
2722    <div aria-hidden class="tw-aspect-square tw-flex tw-
2722items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
2723    <label class="tw-ml-3" for="buying_on_behalf_individual-6abe1b463ec41">
2724        As an individual
2725    </label>
2726    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_individual-6abe1b463ec41--error" x-text="errorText"></div>
2727    </div>            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
2728    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="organization" name="buying_on_behalf" id="buying_on_behalf_organization-6abe1b463ec41" @click="showOnChecked" />
2729    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
2730    <label class="tw-ml-3" for="buying_on_behalf_organization-6abe1b463ec41">
2731        On behalf of a group or organization
2732    </label>
2733    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_organization-6abe1b463ec41--error" x-text="errorText"></div>
2734    </div>        </div>
2735    </fieldset>
2736    <template x-if="active">
2737        <fieldset class="form__fieldset">
2738            <legend>Tell us about your group or organization</legend>
2739            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_name_6abe1b463ec41">
2740  <label class="form__label" for="buying_on_behalf_name_6abe1b463ec41" 
2741  >
2742    Organization Name<span x-show="required">*</span>
2743  </label>
2744  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_name_6abe1b463ec41" name="buying_on_behalf_name" placeholder="Organization Name" required="required" />
2745
2746<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2747  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_name_6abe1b463ec41--error" x-text="errorText"></div>
2748  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_type_6abe1b463ec41">
2749  <label class="form__label" for="buying_on_behalf_type_6abe1b463ec41" 
2750  >
2751    Select Organization Type<span x-show="required">*</span>
2752  </label>
2753  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_type_6abe1b463ec41" name="buying_on_behalf_type">
2754      <option label="Select Organization Type" value="" selected>Select Organization Type</option>
2755      <option label="Civic Group" value="civic_group" >Civic Group</option>
2756      <option label="Congregation/Faith Group" value="congregation" >Congregation/Faith Group</option>
2757      <option label="Corporation" value="corporation" >Corporation</option>
2758      <option label="Family Group" value="family_group" >Family Group</option>
2759      <option label="Foundation" value="foundation" >Foundation</option>
2760      <option label="School" value="school" >School</option>
2761      <option label="Other" value="other" >Other</option>
2762  </select>
2763  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_type_6abe1b463ec41--error" x-text="errorText"></div>
2764  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_1_6abe1b463ec41">
2765  <label class="form__label" for="buying_on_behalf_address_1_6abe1b463ec41" 
2766  >
2767    Organization Address<span x-show="required">*</span>
2768  </label>
2769  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="buying_on_behalf_address_1_6abe1b463ec41" name="buying_on_behalf_address_1" placeholder="Address 1" required="required" />
2770
2771<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
2771d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2772  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_1_6abe1b463ec41--error" x-text="errorText"></div>
2773  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_2_6abe1b463ec41">
2774  <label class="form__label" for="buying_on_behalf_address_2_6abe1b463ec41" 
2775  >
2776    Organization Address Line 2<span x-show="required">*</span>
2777  </label>
2778  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="buying_on_behalf_address_2_6abe1b463ec41" name="buying_on_behalf_address_2" placeholder="Organization Address Line 2" />
2779
2780<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2781  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_2_6abe1b463ec41--error" x-text="errorText"></div>
2782  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_city_6abe1b463ec41">
2783  <label class="form__label" for="buying_on_behalf_city_6abe1b463ec41" 
2784  >
2785    City<span x-show="required">*</span>
2786  </label>
2787  <input class="form__element" type="buying_on_behalf_city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="buying_on_behalf_city_6abe1b463ec41" name="buying_on_behalf_city" placeholder="City" required="required" />
2788
2789<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2790  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_city_6abe1b463ec41--error" x-text="errorText"></div>
2791  </div>            <div x-data="StateSelect" x-load data-target="buying_on_behalf_state">
2792      <template x-if="showAU">
2793      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-AU-6abe1b463ec41">
2794  <label class="form__label" for="buying_on_behalf_state-AU-6abe1b463ec41" 
2795  >
2796    State<span x-show="required">*</span>
2797  </label>
2798  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-AU-6abe1b463ec41" name="buying_on_behalf_state" required="required">
2799      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
2800      <option label="New South Wales" value="NSW" >New South Wales</option>
2801      <option label="Northern Territory" value="NT" >Northern Territory</option>
2802      <option label="Queensland" value="QLD" >Queensland</option>
2803      <option label="South Australia" value="SA" >South Australia</option>
2804      <option label="Tasmania" value="TAS" >Tasmania</option>
2805      <option label="Victoria" value="VIC" >Victoria</option>
2806      <option label="Western Australia" value="WA" >Western Australia</option>
2807  </select>
2808  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-AU-6abe1b463ec41--error" x-text="errorText"></div>
2809  </div>    </template>
2810      <template x-if="showCA">
2811      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-CA-6abe1b463ec41">
2812  <label class="form__label" for="buying_on_behalf_state-CA-6abe1b463ec41" 
2813  >
2814    Province<span x-show="required">*</span>
2815  </label>
2816  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-CA-6abe1b463ec41" name="buying_on_behalf_state" required="required">
2817      <option label="Alberta" value="AB" >Alberta</option>
2818      <option label="British Columbia" value="BC" >British Columbia</option>
2819      <option label="Manitoba" value="MB" >Manitoba</option>
2820      <option label="New Brunswick" value="NB" >New Brunswick</option>
2821      <option label="Newfoundland" value="NF" >Newfoundland</option>
2822      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
2823      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
2824      <option label="Nunavut" value="NU" >Nunavut</option>
2825      <option label="Ontario" value="ON" >Ontario</option>
2826      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
2827      <option label="Quebec" value="QC" >Quebec</option>
2828      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
2829      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
2830  </select>
2831  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-CA-6abe1b463ec41--error" x-text="errorText"></div>
2832  </div>    </template>
2833      <template x-if="showUS">
2834      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-US-6abe1b463ec41">
2835  <label class="form__label" for="buying_on_behalf_state-US-6abe1b463ec41" 
2836  >
2837    State<span x-show="required">*</span>
2838  </label>
2839  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-US-6abe1b463ec41" name="buying_on_behalf_state" required="required">
2840      <option label="Alabama" value="AL" >Alabama</option>
2841      <option label="Alaska" value="AK" >Alaska</option>
2842      <option label="Arizona" value="AZ" >Arizona</option>
2843      <option label="Arkansas" value="AR" >Arkansas</option>
2844      <option label="California" value="CA" >California</option>
2845      <option label="Colorado" value="CO" >Colorado</option>
2846      <option label="Connecticut" value="CT" >Connecticut</option>
2847      <option label="Delaware" value="DE" >Delaware</option>
2848      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
2849      <option label="Florida" value="FL" >Florida</option>
2850      <option label="Georgia" value="GA" >Georgia</option>
2851      <option label="Hawaii" value="HI" >Hawaii</option>
2852      <option label="Idaho" value="ID" >Idaho</option>
2853      <option label="Illinois" value="IL" >Illinois</option>
2854      <option label="Indiana" value="IN" >Indiana</option>
2855      <option label="Iowa" value="IA" >Iowa</option>
2856      <option label="Kansas" value="KS" >Kansas</option>
2857      <option label="Kentucky" value="KY" >Kentucky</option>
2858      <option label="Louisiana" value="LA" >Louisiana</option>
2859      <option label="Maine" value="ME" >Maine</option>
2860      <option label="Maryland" value="MD" >Maryland</option>
2861      <option label="Massachusetts" value="MA" >Massachusetts</option>
2862      <option label="Michigan" value="MI" >Michigan</option>
2863      <option label="Minnesota" value="MN" >Minnesota</option>
2864      <option label="Mississippi" value="MS" >Mississippi</option>
2865      <option label="Missouri" value="MO" >Missouri</option>
2866      <option label="Montana" value="MT" >Montana</option>
2867      <option label="Nebraska" value="NE" >Nebraska</option>
2868      <option label="Nevada" value="NV" >Nevada</option>
2869      <option label="New Hampshire" value="NH" >New Hampshire</option>
2870      <option label="New Jersey" value="NJ" >New Jersey</option>
2871      <option label="New Mexico" value="NM" >New Mexico</option>
2872      <option label="New York" value="NY" >New York</option>
2873      <option label="North Carolina" value="NC" >North Carolina</option>
2874      <option label="North Dakota" value="ND" >North Dakota</option>
2875      <option label="Ohio" value="OH" >Ohio</option>
2876      <option label="Oklahoma" value="OK" >Oklahoma</option>
2877      <option label="Oregon" value="OR" >Oregon</option>
2878      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
2879      <option label="Rhode Island" value="RI" >Rhode Island</option>
2880      <option label="South Carolina" value="SC" >South Carolina</option>
2881      <option label="South Dakota" value="SD" >South Dakota</option>
2882      <option label="Tennessee" value="TN" >Tennessee</option>
2883      <option label="Texas" value="TX" >Texas</option>
2884      <option label="Utah" value="UT" >Utah</option>
2885      <option label="Vermont" value="VT" >Vermont</option>
2886      <option label="Virginia" value="VA" >Virginia</option>
2887      <option label="Washington" value="WA" >Washington</option>
2888      <option label="West Virginia" value="WV" >West Virginia</option>
2889      <option label="Wisconsin" value="WI" >Wisconsin</option>
2890      <option label="Wyoming" value="WY" >Wyoming</option>
2891  </select>
2892  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-US-6abe1b463ec41--error" x-text="errorText"></div>
2893  </div>    </template>
2894    <template x-if="showOther">
2895    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b463ec41">
2896  <label class="form__label" for="state-other-US-6abe1b463ec41" 
2897  >
2898    State/Province<span x-show="required">*</span>
2899  </label>
2900  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b463ec41" name="buying_on_behalf_state" placeholder="State/Province" selectedOption="" required="required" />
2901
2902<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
2902d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2903  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b463ec41--error" x-text="errorText"></div>
2904  </div>  </template>
2905</div>
2906            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_zip_6abe1b463ec41">
2907  <label class="form__label" for="buying_on_behalf_zip_6abe1b463ec41" 
2908  >
2909    Zip<span x-show="required">*</span>
2910  </label>
2911  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_zip_6abe1b463ec41" name="buying_on_behalf_zip" autocomplete="postal-code" autocorrect="off" required="required" />
2912
2913<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
2914  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_zip_6abe1b463ec41--error" x-text="errorText"></div>
2915  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country_6abe1b463ec41">
2916  <label class="form__label" for="buying_on_behalf_country_6abe1b463ec41" 
2917  >
2918    Country<span x-show="required">*</span>
2919  </label>
2920  <div x-data="CountrySelect" x-load data-trigger="state">
2921    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country-6abe1b463ec41">
2922  <label class="form__label" for="buying_on_behalf_country-6abe1b463ec41" 
2923  >
2924    Country<span x-show="required">*</span>
2925  </label>
2926  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="buying_on_behalf_country-6abe1b463ec41" name="buying_on_behalf_country" required="required">
2927      <option label="United States" value="US" >United States</option>
2928      <option label="Afghanistan" value="AF" >Afghanistan</option>
2929      <option label="Åland Islands" value="AX" >Åland Islands</option>
2930      <option label="Albania" value="AL" >Albania</option>
2931      <option label="Algeria" value="DZ" >Algeria</option>
2932      <option label="American Samoa" value="AS" >American Samoa</option>
2933      <option label="Andorra" value="AD" >Andorra</option>
2934      <option label="Angola" value="AO" >Angola</option>
2935      <option label="Anguilla" value="AI" >Anguilla</option>
2936      <option label="Antarctica" value="AQ" >Antarctica</option>
2937      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
2938      <option label="Argentina" value="AR" >Argentina</option>
2939      <option label="Armenia" value="AM" >Armenia</option>
2940      <option label="Aruba" value="AW" >Aruba</option>
2941      <option label="Australia" value="AU" >Australia</option>
2942      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
2943      <option label="Bahamas" value="BS" >Bahamas</option>
2944      <option label="Bahrain" value="BH" >Bahrain</option>
2945      <option label="Bangladesh" value="BD" >Bangladesh</option>
2946      <option label="Barbados" value="BB" >Barbados</option>
2947      <option label="Belarus" value="BY" >Belarus</option>
2948      <option label="Belize" value="BZ" >Belize</option>
2949      <option label="Benin" value="BJ" >Benin</option>
2950      <option label="Bermuda" value="BM" >Bermuda</option>
2951      <option label="Bhutan" value="BT" >Bhutan</option>
2952      <option label="Bolivia" value="BO" >Bolivia</option>
2953      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
2954      <option label="Botswana" value="BW" >Botswana</option>
2955      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
2956      <option label="Brazil" value="BR" >Brazil</option>
2957      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
2958      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
2959      <option label="Brunei" value="BN" >Brunei</option>
2960      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
2961      <option label="Burundi" value="BI" >Burundi</option>
2962      <option label="Cambodia" value="KH" >Cambodia</option>
2963      <option label="Cameroon" value="CM" >Cameroon</option>
2964      <option label="Canada" value="CA" >Canada</option>
2965      <option label="Cape Verde" value="CV" >Cape Verde</option>
2966      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
2967      <option label="Central African Republic" value="CF" >Central African Republic</option>
2968      <option label="Chad" value="TD" >Chad</option>
2969      <option label="Chile" value="CL" >Chile</option>
2970      <option label="Christmas Island" value="CX" >Christmas Island</option>
2971      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
2972      <option label="Colombia" value="CO" >Colombia</option>
2973      <option label="Comoros" value="KM" >Comoros</option>
2974      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
2975      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
2976      <option label="Cook Islands" value="CK" >Cook Islands</option>
2977      <option label="Costa Rica" value="CR" >Costa Rica</option>
2978      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
2979      <option label="Djibouti" value="DJ" >Djibouti</option>
2980      <option label="Dominica" value="DM" >Dominica</option>
2981      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
2982      <option label="Ecuador" value="EC" >Ecuador</option>
2983      <option label="Egypt" value="EG" >Egypt</option>
2984      <option label="El Salvador" value="SV" >El Salvador</option>
2985      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
2986      <option label="Eritrea" value="ER" >Eritrea</option>
2987      <option label="Ethiopia" value="ET" >Ethiopia</option>
2988      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
2989      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
2990      <option label="Fiji" value="FJ" >Fiji</option>
2991      <option label="French Guiana" value="GF" >French Guiana</option>
2992      <option label="French Polynesia" value="PF" >French Polynesia</option>
2993      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
2994      <option label="Gabon" value="GA" >Gabon</option>
2995      <option label="Gambia" value="GM" >Gambia</option>
2996      <option label="Georgia" value="GE" >Georgia</option>
2997      <option label="Ghana" value="GH" >Ghana</option>
2998      <option label="Gibraltar" value="GI" >Gibraltar</option>
2999      <option label="Greenland" value="GL" >Greenland</option>
3000      <option label="Grenada" value="GD" >Grenada</option>
3001      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
3002      <option label="Guam" value="GU" >Guam</option>
3003      <option label="Guatemala" value="GT" >Guatemala</option>
3004      <option label="Guernsey" value="GG" >Guernsey</option>
3005      <option label="Guinea" value="GN" >Guinea</option>
3006      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
3007      <option label="Guyana" value="GY" >Guyana</option>
3008      <option label="Haiti" value="HT" >Haiti</option>
3009      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
3010      <option label="Honduras" value="HN" >Honduras</option>
3011      <option label="India" value="IN" >India</option>
3012      <option label="Indonesia" value="ID" >Indonesia</option>
3013      <option label="Iraq" value="IQ" >Iraq</option>
3014      <option label="Isle of Man" value="IM" >Isle of Man</option>
3015      <option label="Israel" value="IL" >Israel</option>
3016      <option label="Jamaica" value="JM" >Jamaica</option>
3017      <option label="Japan" value="JP" >Japan</option>
3018      <option label="Jersey" value="JE" >Jersey</option>
3019      <option label="Jordan" value="JO" >Jordan</option>
3020      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
3021      <option label="Kenya" value="KE" >Kenya</option>
3022      <option label="Kiribati" value="KI" >Kiribati</option>
3023      <option label="Kuwait" value="KW" >Kuwait</option>
3024      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
3025      <option label="Laos" value="LA" >Laos</option>
3026      <option label="Lebanon" value="LB" >Lebanon</option>
3027      <option label="Lesotho" value="LS" >Lesotho</option>
3028      <option label="Liberia" value="LR" >Liberia</option>
3029      <option label="Libya" value="LY" >Libya</option>
3030      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
3031      <option label="Macedonia" value="MK" >Macedonia</option>
3032      <option label="Madagascar" value="MG" >Madagascar</option>
3033      <option label="Malawi" value="MW" >Malawi</option>
3034      <option label="Malaysia" value="MY" >Malaysia</option>
3035      <option label="Maldives" value="MV" >Maldives</option>
3036      <option label="Mali" value="ML" >Mali</option>
3037      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
3038      <option label="Martinique" value="MQ" >Martinique</option>
3039      <option label="Mauritania" value="MR" >Mauritania</option>
3040      <option label="Mauritius" value="MU" >Mauritius</option>
3041      <option label="Mayotte" value="YT" >Mayotte</option>
3042      <option label="Mexico" value="MX" >Mexico</option>
3043      <option label="Micronesia" value="FM" >Micronesia</option>
3044      <option label="Moldova" value="MD" >Moldova</option>
3045      <option label="Monaco" value="MC" >Monaco</option>
3046      <option label="Mongolia" value="MN" >Mongolia</option>
3047      <option label="Montenegro" value="ME" >Montenegro</option>
3048      <option label="Montserrat" value="MS" >Montserrat</option>
3049      <option label="Morocco" value="MA" >Morocco</option>
3050      <option label="Mozambique" value="MZ" >Mozambique</option>
3051      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
3052      <option label="Namibia" value="NA" >Namibia</option>
3053      <option label="Nauru" value="NR" >Nauru</option>
3054      <option label="Nepal" value="NP" >Nepal</option>
3055      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
3056      <option label="New Caledonia" value="NC" >New Caledonia</option>
3057      <option label="New Zealand" value="NZ" >New Zealand</option>
3058      <option label="Nicaragua" value="NI" >Nicaragua</option>
3059      <option label="Niger" value="NE" >Niger</option>
3060      <option label="Nigeria" value="NG" >Nigeria</option>
3061      <option label="Niue" value="NU" >Niue</option>
3062      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
3063      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
3064      <option label="Oman" value="OM" >Oman</option>
3065      <option label="Pakistan" value="PK" >Pakistan</option>
3066      <option label="Palau" value="PW" >Palau</option>
3067      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
3068      <option label="Panama" value="PA" >Panama</option>
3069      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
3070      <option label="Paraguay" value="PY" >Paraguay</option>
3071      <option label="Peru" value="PE" >Peru</option>
3072      <option label="Philippines" value="PH" >Philippines</option>
3073      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
3074      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
3075      <option label="Qatar" value="QA" >Qatar</option>
3076      <option label="Réunion" value="RE" >Réunion</option>
3077      <option label="Rwanda" value="RW" >Rwanda</option>
3078      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
3079      <option label="Saint Helena" value="SH" >Saint Helena</option>
3080      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
3081      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
3082      <option label="Saint Martin" value="MF" >Saint Martin</option>
3083      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
3084      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
3085      <option label="Samoa" value="WS" >Samoa</option>
3086      <option label="San Marino" value="SM" >San Marino</option>
3087      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
3088      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
3089      <option label="Senegal" value="SN" >Senegal</option>
3090      <option label="Serbia" value="RS" >Serbia</option>
3091      <option label="Seychelles" value="SC" >Seychelles</option>
3092      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
3093      <option label="Singapore" value="SG" >Singapore</option>
3094      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
3095      <option label="Somalia" value="SO" >Somalia</option>
3096      <option label="South Africa" value="ZA" >South Africa</option>
3097      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
3098      <option label="South Korea" value="KR" >South Korea</option>
3099      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
3100      <option label="Sudan" value="SD" >Sudan</option>
3101      <option label="Suriname" value="SR" >Suriname</option>
3102      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
3103      <option label="Swaziland" value="SZ" >Swaziland</option>
3104      <option label="Switzerland" value="CH" >Switzerland</option>
3105      <option label="Taiwan" value="TW" >Taiwan</option>
3106      <option label="Tajikistan" value="TJ" >Tajikistan</option>
3107      <option label="Tanzania" value="TZ" >Tanzania</option>
3108      <option label="Thailand" value="TH" >Thailand</option>
3109      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
3110      <option label="Togo" value="TG" >Togo</option>
3111      <option label="Tokelau" value="TK" >Tokelau</option>
3112      <option label="Tonga" value="TO" >Tonga</option>
3113      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
3114      <option label="Tunisia" value="TN" >Tunisia</option>
3115      <option label="Turkey" value="TR" >Turkey</option>
3116      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
3117      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
3118      <option label="Tuvalu" value="TV" >Tuvalu</option>
3119      <option label="Uganda" value="UG" >Uganda</option>
3120      <option label="Ukraine" value="UA" >Ukraine</option>
3121      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
3122      <option label="Uruguay" value="UY" >Uruguay</option>
3123      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
3124      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
3125      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
3126      <option label="Vanuatu" value="VU" >Vanuatu</option>
3127      <option label="Vatican City" value="VA" >Vatican City</option>
3128      <option label="Vietnam" value="VN" >Vietnam</option>
3129      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
3130      <option label="Western Sahara" value="EH" >Western Sahara</option>
3131      <option label="Yemen" value="YE" >Yemen</option>
3132      <option label="Zambia" value="ZM" >Zambia</option>
3133      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
3134  </select>
3135  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country-6abe1b463ec41--error" x-text="errorText"></div>
3136  </div></div>
3137  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country_6abe1b463ec41--error" x-text="errorText"></div>
3138  </div>        </fieldset>
3139    </template>
3140</div>
3141          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex 
3141tw-flex-row-reverse tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:tw-bg-[var(--button-primary-color)] [&_.tw-icon]:hover:tw-bg-[var(--button-primary-color-hover)]" type="submit">
3142                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white"></span>                Next
3143                    <span class="loader"></span>
3144            </button>
3145      </div>
3146</form>
3147            <form
3148  @submit.prevent="nextStep"
3149  x-show="isCurrentStep"
3150  data-step=4
3151  data-name="payment"
3152  data-title="Payment Details"
3153  :data-current-step="isCurrentStep"
3154  class="tw-h-full"
3155  
3156>
3157  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
3158    <fieldset 
3159    class="braintree-fields tw-flex tw-flex-col tw-gap-y-4"
3160    data-form-id="multistepForm-6abe1b463ec41"
3161    data-braintree
3162>
3163    <legend class="tw-font-bold tw-py-4">Credit Card Information</legend>
3164
3165    
3166        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="card-number">
3167  <label class="form__label" for="card-number" 
3168  >
3169    Card Number<span x-show="required">*</span>
3170  </label>
3171  <div id="card-number" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
3172  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="card-number--error" x-text="errorText"></div>
3173  </div>
3174        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="cvv">
3175  <label class="form__label" for="cvv" 
3176  >
3177    CVV<span x-show="required">*</span>
3178  </label>
3179  <div id="cvv" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
3180  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="cvv--error" x-text="errorText"></div>
3181  </div>
3182        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="expiration-date">
3183  <label class="form__label" for="expiration-date" 
3184  >
3185    Expiration Date<span x-show="required">*</span>
3186  </label>
3187  <div id="expiration-date" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
3188  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="expiration-date--error" x-text="errorText"></div>
3189  </div>
3190        
3191        <input type="hidden" name="payment_method" value="braintree">
3192        
3193        <div x-data="DataLayer" x-load="visible" x-init="addPaymentInfo">
3194            <input type="hidden" x-ref="productData" :value="productData">
3195        </div>  
3196    </fieldset>
3197          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-4 tw-w-full [&_.tw-icon]:tw-bg-[var(--button-primary-color)] [&_.tw-icon]:hover:tw-bg-[var(--button-primary-color-hover)]" type="submit">
3198                    <span aria-hidden="true" class="tw-icon sprite-secure-mask tw-bg-clarity-white"></span>                Donate
3199                    <span class="loader"></span>
3200            </button>
3201      </div>
3202</form>
3203        </div>
3204    </div>
3205</div>
3206
3207</div>            </div>
3208
3209            
3210        </div>
3211    </div>
3212
3213</section>
3214      
3215                
3216              <section class="tw-relative tw-py-10 md:tw-py-20 theme--grand-blue tw-bg-theme-background" id="call-to-action-6abe1b4642004" data-block="call-to-action">
3217          <picture
3218  x-data="PreloadImage"
3219  x-load
3220  class="tw-absolute tw-inset-0 after:tw-absolute after:tw-inset-0 after:tw-bg-black after:tw-opacity-50"
3221>
3222  <span
3223    data-image-fallback
3224    aria-hidden="true"
3225    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3226  ></span>
3227                  <source media="(min-width: 768px)"
3228        srcset="https://media-refresh.heifer.org/wp-content/uploads/header-UG202206-055-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1168&amp;h=487&amp;fp-x=0.49&amp;fp-y=0.69 1168w, https://media-refresh.heifer.org/wp-content/uploads/header-UG202206-055-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=2336&amp;h=974&amp;fp-x=0.49&amp;fp-y=0.69 2336w"
3229        sizes="(min-width: 768px) 100vw, 100vw"
3230      />
3231        <img
3232    alt="A person stands among a large herd of cattle on a dirt field at sunrise or sunset, with green trees and a partly cloudy sky in the background." loading="eager" fetchpriority="high" class="tw-opacity-0 tw-h-full tw-object-cover tw-w-full"
3233    x-ref="preloadedImage"
3234    srcset="https://media-refresh.heifer.org/wp-content/uploads/header-UG202206-055-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.69 480w, https://media-refresh.heifer.org/wp-content/uploads/header-UG202206-055-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.49&amp;fp-y=0.69 960w"
3235    sizes="(min-width: 768px) 100vw, 100vw"
3236    src="https://media-refresh.heifer.org/wp-content/uploads/header-UG202206-055-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.69"
3237    style=""
3238  />
3239</picture>              <div class="tw-relative tw-wrapper md:tw-w-10/12 tw-mx-auto tw-text-center">
3240        <h2 class="tw-text-h2 tw-text-theme-color">
3241        International Year of the Woman Farmer
3242            </h2 >        <div class="wysiwyg tw-mt-8 tw-text-theme-color md:tw-leading-8 md:tw-text-lg tw-leading-7 tw-text-clarity-white tw-text-center">
3243        <p>Although women are half the population, women and girls are more deeply affected by hunger and poverty.</p>
3244    </div>    <div class="tw-flex tw-flex-col tw-gap-6 tw-mt-9 md:tw-flex-row md:tw-justify-center">
3245          <a class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base" href="/campaign/year-of-the-woman-farmer?isource=HIWEB26WE0001" target="_blank">
3246                Find Out More
3247    </a>
3248          </div>
3249      </div>
3250    </section>      
3251                
3252              <section class="tw-py-10 md:tw-py-20" id="cards-feature-6abe1b46423bd" data-block="cards-feature">
3253  <div class="tw-wrapper">
3254              <div class="tw-gap-5 tw-grid tw-grid-cols-1 tw-mt-8 md:tw-grid-cols-2 md:tw-gap md:tw-mt-12 lg:tw-grid-cols-3">
3255                  <article class="tw-flex tw-flex-col tw-text-center">
3256      <figure class="theme--grand-blue tw-bg-theme-background tw-px-5 tw-relative">
3257      <picture
3258  x-data="PreloadImage"
3259  x-load
3260  class="tw-block tw-relative tw-top-5 tw-bottom-0 tw-h-full"
3261>
3262  <span
3263    data-image-fallback
3264    aria-hidden="true"
3265    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3266  ></span>
3267    <img
3268    alt="" loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-aspect-standard tw-object-cover"
3269    x-ref="preloadedImage"
3270    srcset="https://media-refresh.heifer.org/wp-content/uploads/NG202505-309-1-e1784243148814.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.49&amp;fp-y=0.45 450w, https://media-refresh.heifer.org/wp-content/uploads/NG202505-309-1-e1784243148814.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.45 480w, https://media-refresh.heifer.org/wp-content/uploads/NG202505-309-1-e1784243148814.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.49&amp;fp-y=0.45 900w, https://media-refresh.heifer.org/wp-content/uploads/NG202505-309-1-e1784243148814.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.49&amp;fp-y=0.45 960w"
3271    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3272    src="https://media-refresh.heifer.org/wp-content/uploads/NG202505-309-1-e1784243148814.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.45"
3273    style=""
3274  />
3275</picture>    </figure>
3276    <div class="tw-flex tw-flex-col tw-gap-y-2 tw-grow tw-mt-5 tw-p-6">
3277    <div>
3278              <h3 class="tw-text-h4 tw-text-active-blue">
3279        Give With Your Donor-Advised Fund
3280            </h3 >                </div>
3281          <div class="wysiwyg tw-text-sm tw-leading-6">
3282        <p>Use your Donor-Advised Fund (DAF) to recommend a grant to Heifer International – it&#8217;s a simple and tax-advantageous way to give.</p>
3283    </div>              <div class="tw-flex tw-justify-center">
3284        <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-font-extrabold tw-mt-4" href="/give/donor-advised-funds?isource=HIDFH26DF0001" target="_self">
3285                Give A Grant
3286    </a>
3287      </div>
3288      </div>
3289</article> 
3290                  <article class="tw-flex tw-flex-col tw-text-center">
3291      <figure class="theme--vista-blue tw-bg-theme-background tw-px-5 tw-relative">
3292      <picture
3293  x-data="PreloadImage"
3294  x-load
3295  class="tw-block tw-relative tw-top-5 tw-bottom-0 tw-h-full"
3296>
3297  <span
3298    data-image-fallback
3299    aria-hidden="true"
3300    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3301  ></span>
3302    <img
3303    alt="" loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-aspect-standard tw-object-cover"
3304    x-ref="preloadedImage"
3305    srcset="https://media-refresh.heifer.org/wp-content/uploads/Nepal_2024Map.svg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.66&amp;fp-y=0.69 450w, https://media-refresh.heifer.org/wp-content/uploads/Nepal_2024Map.svg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.66&amp;fp-y=0.69 480w, https://media-refresh.heifer.org/wp-content/uploads/Nepal_2024Map.svg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.66&amp;fp-y=0.69 900w, https://media-refresh.heifer.org/wp-content/uploads/Nepal_2024Map.svg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.66&amp;fp-y=0.69 960w"
3306    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3307    src="https://media-refresh.heifer.org/wp-content/uploads/Nepal_2024Map.svg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.66&amp;fp-y=0.69"
3308    style=""
3309  />
3310</picture>    </figure>
3311    <div class="tw-flex tw-flex-col tw-gap-y-2 tw-grow tw-mt-5 tw-p-6">
3312    <div>
3313              <h3 class="tw-text-h4 tw-text-active-blue">
3314        Nepal Floods Devastate Heifer Program Areas
3315            </h3 >                </div>
3316          <div class="wysiwyg tw-text-sm tw-leading-6">
3317        <p>Our hearts are with the many people in Nepal who have been plunged into crisis from the massive and devastating floods that tore through areas of the country.</p>
3318    </div>              <div class="tw-flex tw-justify-center">
3319        <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-font-extrabold tw-mt-4" href="/blog/nepal-floods-devastate-heifer-program-areas" target="_self">
3320                Read More
3321    </a>
3322      </div>
3323      </div>
3324</article> 
3325                  <article class="tw-flex tw-flex-col tw-text-center">
3326      <figure class="theme--rich-orange tw-bg-theme-background tw-px-5 tw-relative">
3327      <picture
3328  x-data="PreloadImage"
3329  x-load
3330  class="tw-block tw-relative tw-top-5 tw-bottom-0 tw-h-full"
3331>
3332  <span
3333    data-image-fallback
3334    aria-hidden="true"
3335    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3336  ></span>
3337    <img
3338    alt="" loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-aspect-standard tw-object-cover"
3339    x-ref="preloadedImage"
3340    srcset="https://media-refresh.heifer.org/wp-content/uploads/Homepage-cards-400x300-3.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.47&amp;fp-y=0.45 450w, https://media-refresh.heifer.org/wp-content/uploads/Homepage-cards-400x300-3.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.47&amp;fp-y=0.45 480w, https://media-refresh.heifer.org/wp-content/uploads/Homepage-cards-400x300-3.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.47&amp;fp-y=0.45 900w, https://media-refresh.heifer.org/wp-content/uploads/Homepage-cards-400x300-3.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.47&amp;fp-y=0.45 960w"
3341    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3342    src="https://media-refresh.heifer.org/wp-content/uploads/Homepage-cards-400x300-3.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.47&amp;fp-y=0.45"
3343    style=""
3344  />
3345</picture>    </figure>
3346    <div class="tw-flex tw-flex-col tw-gap-y-2 tw-grow tw-mt-5 tw-p-6">
3347    <div>
3348              <h3 class="tw-text-h4 tw-text-active-blue">
3349        Intelligent Giving
3350            </h3 >                </div>
3351          <div class="wysiwyg tw-text-sm tw-leading-6">
3352        <p><strong class="tw-font-extrabold">Creating a new operating system for the planet.</strong> We provide innovative solutions to some of the world’s biggest hunger and poverty challenges.</p>
3353    </div>              <div class="tw-flex tw-justify-center">
3354        <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-font-extrabold tw-mt-4" href="/campaign/intelligent-giving?isource=HIP1B26HI0001" target="_self">
3355                Read More
3356    </a>
3357      </div>
3358      </div>
3359</article> 
3360              </div>
3361      </div>
3362</section>      
3363                
3364              <section class="tw-py-10" id="wysiwyg-6abe1b4642b36" data-block="wysiwyg">
3365            <div class="tw-wrapper-wysiwyg">
3366            <div class="wysiwyg">
3367        <h2 class="tw-text-h2">We&#8217;re on a mission to end global hunger and poverty by <em>supporting and investing</em> in farmers and their communities.</h2>
3368    </div>        </div>
3369    </section>      
3370                
3371              <div class="tw-wrapper tw-py-10 md:tw-py-20" id="stat-content-tiles-6abe1b4642d0d" data-block="stat-content-tiles">
3372    <div class="tw-flex tw-flex-col lg:tw-flex-row tw-gap-y-10 tw-gap-x-20">
3373        <div class="lg:tw-w-1/2">
3374            <h2 class="tw-text-h2 tw-text-theme-color">
3375        Local Solutions, Global Impact
3376            </h2 >        <div class="wysiwyg tw-mt-8 tw-text-theme-color md:tw-leading-8 md:tw-text-lg tw-leading-7">
3377        <p>We partner with smallholder farmers – especially women farmers – to improve their families’ food security and increase their incomes.</p>
3378<p>We offer tools, training and resources that help farmers work together to build profitable, sustainable businesses with strong market linkages.</p>
3379    </div>    <div class="tw-flex tw-flex-col tw-gap-6 tw-mt-9 md:tw-flex-row ">
3380              <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base" href="/our-work" target="_self">
3381                MORE ABOUT OUR WORK
3382    </a>
3383      </div>
3384        </div>
3385        <div class="tw-flex tw-flex-col tw-gap-8 md:tw-flex-row lg:tw-w-1/2">
3386                                                <div class="tw-flex tw-flex-col tw-gap-y-8 tw-w-full ">
3387                                                    <div class="theme--clarity-white tw-bg-theme-background tw-p-5 tw-shadow tw-text-center">
3388  <div class="tw-flex tw-flex-row tw-gap-5 md:tw-flex-col">
3389        <div class="tw-flex-grow">
3390              <h3 class="tw-text-h2 tw-text-rich-orange">
3391        59.8 million
3392            </h3 >                    <div class="wysiwyg tw-mt-3 tw-text-sm tw-text-theme-color">
3393        <p>Households assisted since Heifer began in 1944</p>
3394    </div>          </div>  
3395  </div>
3396</div>                                                    <div class="theme--grand-blue tw-bg-theme-background tw-p-5 tw-shadow tw-text-center">
3397  <div class="tw-flex tw-flex-row tw-gap-5 md:tw-flex-col">
3398          <div class="tw-flex tw-flex-[0_0_auto] tw-justify-center tw-w-1/3 md:tw-w-auto">
3399        <span aria-hidden="true" class="tw-icon sprite-blog-climate-mask tw-bg-clarity-white tw-text-6xl"></span>      </div>
3400        <div class="tw-flex-grow">
3401              <h3 class="tw-text-h2 tw-text-vista-blue">
3402        19 countries
3403            </h3 >                    <div class="wysiwyg tw-mt-3 tw-text-sm tw-text-theme-color">
3404        <p>Heifer works globally, with projects across four continents</p>
3405    </div>          </div>  
3406  </div>
3407</div>                                            </div>
3408                                                                <div class="tw-flex tw-flex-col tw-gap-y-8 tw-w-full md:tw-mt-8">
3409                                                    <div class="theme--grand-blue tw-bg-theme-background tw-p-5 tw-shadow tw-text-center">
3410  <div class="tw-flex tw-flex-row tw-gap-5 md:tw-flex-col">
3411        <div class="tw-flex-grow">
3412              <h3 class="tw-text-h2 tw-text-vista-blue">
3413        2.9 million
3414            </h3 >                    <div class="wysiwyg tw-mt-3 tw-text-sm tw-text-theme-color">
3415        <p class="p1">Active participants in Heifer programs</p>
3416    </div>          </div>  
3417  </div>
3418</div>                                                    <div class="theme--rich-orange tw-bg-theme-background tw-p-5 tw-shadow tw-text-center">
3419  <div class="tw-flex tw-flex-row tw-gap-5 md:tw-flex-col">
3420        <div class="tw-flex-grow">
3421              <h3 class="tw-text-h2 tw-text-clarity-white">
3422        10+ million
3423            </h3 >                    <div class="wysiwyg tw-mt-3 tw-text-sm tw-text-theme-color">
3424        <p>People trained by Heifer since 2012, 64% women</p>
3425    </div>          </div>  
3426  </div>
3427</div>                                            </div>
3428                                    </div>
3429    </div>
3430</div>      
3431                
3432              <section class="tw-py-10 md:tw-py-20 tw-overflow-hidden" id="cards-stories-6abe1b464321c" data-block="cards-stories" x-data="Carousel" x-load="visible">
3433  <div class="tw-wrapper">
3434          <div class="md:tw-max-w-prose md:tw-mx-auto">
3435        <h2 class="tw-text-h2 tw-text-soil-brown accent-line accent-centered tw-text-center tw-text-center">
3436        Recent News & Stories
3437            </h2 >
3438        </div>
3439              <div class="cards-stories__carousel swiper swiper-cards-stories tw-mt-10 !tw-overflow-visible" x-cloak>
3440        <div class="swiper-wrapper !tw-h-auto md:tw-flex md:tw-flex-row">
3441                                    <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3442                <figure class="tw-aspect-standard tw-relative">
3443                                      <picture
3444  x-data="PreloadImage"
3445  x-load
3446  class="tw-absolute tw-inset-0 tw-shadow"
3447>
3448  <span
3449    data-image-fallback
3450    aria-hidden="true"
3451    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3452  ></span>
3453    <img
3454    alt="A group of women farmers in colorful saris stand together holding goats and chickens." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3455    x-ref="preloadedImage"
3456    srcset="https://media-refresh.heifer.org/wp-content/uploads/IN202512-060-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.52&amp;fp-y=0.41 450w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-060-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.52&amp;fp-y=0.41 480w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-060-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.52&amp;fp-y=0.41 900w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-060-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.52&amp;fp-y=0.41 960w"
3457    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3458    src="https://media-refresh.heifer.org/wp-content/uploads/IN202512-060-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.52&amp;fp-y=0.41"
3459    style=""
3460  />
3461</picture>                                  </figure>
3462                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3463        Women Make Food Systems Work for Them — By Working Together
3464            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3465                    June 16, 2026
3466                  </p>
3467                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/a-note-from-the-ceo-summer-2026" target=_self>
3468        Read The Story
3469                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3470                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3471            </svg>
3472            </a>                              </article>
3473                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3474                <figure class="tw-aspect-standard tw-relative">
3475                                      <picture
3476  x-data="PreloadImage"
3477  x-load
3478  class="tw-absolute tw-inset-0 tw-shadow"
3479>
3480  <span
3481    data-image-fallback
3482    aria-hidden="true"
3483    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3484  ></span>
3485    <img
3486    alt="A woman rakes cacao beans on drying tables." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3487    x-ref="preloadedImage"
3488    srcset="https://media-refresh.heifer.org/wp-content/uploads/DSC09689-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.39&amp;fp-y=0.27 450w, https://media-refresh.heifer.org/wp-content/uploads/DSC09689-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.39&amp;fp-y=0.27 480w, https://media-refresh.heifer.org/wp-content/uploads/DSC09689-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.39&amp;fp-y=0.27 900w, https://media-refresh.heifer.org/wp-content/uploads/DSC09689-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.39&amp;fp-y=0.27 960w"
3489    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3490    src="https://media-refresh.heifer.org/wp-content/uploads/DSC09689-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.39&amp;fp-y=0.27"
3491    style=""
3492  />
3493</picture>                                  </figure>
3494                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3495        In Guatemala, the Woman Who Was Once Afraid to Speak Now Inspires an Entire Community
3496            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3497                    September 29, 2026
3498                  </p>
3499                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/guatemala-woman-farmer-glendi-teyul" target=_self>
3500        Read The Story
3501                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3502                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3503            </svg>
3504            </a>                              </article>
3505                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3506                <figure class="tw-aspect-standard tw-relative">
3507                                      <picture
3508  x-data="PreloadImage"
3509  x-load
3510  class="tw-absolute tw-inset-0 tw-shadow"
3511>
3512  <span
3513    data-image-fallback
3514    aria-hidden="true"
3515    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3516  ></span>
3517    <img
3518    alt="A woman and two men hold an APROCAJER coffee sack in front of stacks of bagged coffee." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3519    x-ref="preloadedImage"
3520    srcset="https://media-refresh.heifer.org/wp-content/uploads/Photo-1-%E2%80%93-APROCAJER-coffee-sack.jpeg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.52&amp;fp-y=0.29 450w, https://media-refresh.heifer.org/wp-content/uploads/Photo-1-%E2%80%93-APROCAJER-coffee-sack.jpeg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.52&amp;fp-y=0.29 480w, https://media-refresh.heifer.org/wp-content/uploads/Photo-1-%E2%80%93-APROCAJER-coffee-sack.jpeg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.52&amp;fp-y=0.29 900w, https://media-refresh.heifer.org/wp-content/uploads/Photo-1-%E2%80%93-APROCAJER-coffee-sack.jpeg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.52&amp;fp-y=0.29 960w"
3521    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3522    src="https://media-refresh.heifer.org/wp-content/uploads/Photo-1-%E2%80%93-APROCAJER-coffee-sack.jpeg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.52&amp;fp-y=0.29"
3523    style=""
3524  />
3525</picture>                                  </figure>
3526                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3527        APROCAJER Opens the Door to the European Market With Its First Organic Coffee Export to Germany
3528            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3529                    September 22, 2026
3530                  </p>
3531                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/aprocajer-honduras-coffee-export-germany" target=_self>
3532        Read The Story
3533                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3534                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3535            </svg>
3536            </a>                              </article>
3537                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3538                <figure class="tw-aspect-standard tw-relative">
3539                                      <picture
3540  x-data="PreloadImage"
3541  x-load
3542  class="tw-absolute tw-inset-0 tw-shadow"
3543>
3544  <span
3545    data-image-fallback
3546    aria-hidden="true"
3547    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3548  ></span>
3549    <img
3550    alt="A woman smiles while holding a yellow cacao pod." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3551    x-ref="preloadedImage"
3552    srcset="https://media-refresh.heifer.org/wp-content/uploads/EC202508-253-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.72&amp;fp-y=0.43 450w, https://media-refresh.heifer.org/wp-content/uploads/EC202508-253-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.72&amp;fp-y=0.43 480w, https://media-refresh.heifer.org/wp-content/uploads/EC202508-253-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.72&amp;fp-y=0.43 900w, https://media-refresh.heifer.org/wp-content/uploads/EC202508-253-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.72&amp;fp-y=0.43 960w"
3553    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3554    src="https://media-refresh.heifer.org/wp-content/uploads/EC202508-253-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.72&amp;fp-y=0.43"
3555    style=""
3556  />
3557</picture>                                  </figure>
3558                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3559        A Cacao Farmer Puts a Family Legacy to Work in Ecuador
3560            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3561                    September 15, 2026
3562                  </p>
3563                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/cacao-farmer-family-legacy-ecuador" target=_self>
3564        Read The Story
3565                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3566                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3567            </svg>
3568            </a>                              </article>
3569                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3570                <figure class="tw-aspect-standard tw-relative">
3571                                      <picture
3572  x-data="PreloadImage"
3573  x-load
3574  class="tw-absolute tw-inset-0 tw-shadow"
3575>
3576  <span
3577    data-image-fallback
3578    aria-hidden="true"
3579    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3580  ></span>
3581    <img
3582    alt="A woman smiles while holding a blue basket filled with brown eggs outside her chicken coop." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3583    x-ref="preloadedImage"
3584    srcset="https://media-refresh.heifer.org/wp-content/uploads/ET202509-242-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.49&amp;fp-y=0.34 450w, https://media-refresh.heifer.org/wp-content/uploads/ET202509-242-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.34 480w, https://media-refresh.heifer.org/wp-content/uploads/ET202509-242-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.49&amp;fp-y=0.34 900w, https://media-refresh.heifer.org/wp-content/uploads/ET202509-242-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.49&amp;fp-y=0.34 960w"
3585    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3586    src="https://media-refresh.heifer.org/wp-content/uploads/ET202509-242-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.49&amp;fp-y=0.34"
3587    style=""
3588  />
3589</picture>                                  </figure>
3590                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3591        An Ethiopian Woman’s Determination: From Healing to Community Solidarity
3592            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3593                    September 2, 2026
3594                  </p>
3595                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/ethiopian-woman-poultry-business" target=_self>
3596        Read The Story
3597                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3598                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3599            </svg>
3600            </a>                              </
3600article>
3601                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3602                <figure class="tw-aspect-standard tw-relative">
3603                                  </figure>
3604                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3605        Heifer Stands with Victims of Nepal’s Devastating Floods
3606            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3607                    August 28, 2026
3608                  </p>
3609                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/nepal-floods-devastate-heifer-program-areas" target=_self>
3610        Read The Story
3611                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3612                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3613            </svg>
3614            </a>                              </article>
3615                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3616                <figure class="tw-aspect-standard tw-relative">
3617                                      <picture
3618  x-data="PreloadImage"
3619  x-load
3620  class="tw-absolute tw-inset-0 tw-shadow"
3621>
3622  <span
3623    data-image-fallback
3624    aria-hidden="true"
3625    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3626  ></span>
3627    <img
3628    alt="Winnie Kiiza sells a bag of animal feed to a customer." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3629    x-ref="preloadedImage"
3630    srcset="https://media-refresh.heifer.org/wp-content/uploads/winnie-kiiza-animal-feed-business-uganda.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.30&amp;fp-y=0.43 450w, https://media-refresh.heifer.org/wp-content/uploads/winnie-kiiza-animal-feed-business-uganda.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.30&amp;fp-y=0.43 480w, https://media-refresh.heifer.org/wp-content/uploads/winnie-kiiza-animal-feed-business-uganda.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.30&amp;fp-y=0.43 900w, https://media-refresh.heifer.org/wp-content/uploads/winnie-kiiza-animal-feed-business-uganda.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.30&amp;fp-y=0.43 960w"
3631    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3632    src="https://media-refresh.heifer.org/wp-content/uploads/winnie-kiiza-animal-feed-business-uganda.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.30&amp;fp-y=0.43"
3633    style=""
3634  />
3635</picture>                                  </figure>
3636                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3637        When Hens Must Eat: How One Woman Is Rewriting the Future for Youth and Farmers in Uganda
3638            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3639                    August 18, 2026
3640                  </p>
3641                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/when-hens-must-eat-youth-agribusiness-uganda" target=_self>
3642        Read The Story
3643                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3644                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3645            </svg>
3646            </a>                              </article>
3647                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3648                <figure class="tw-aspect-standard tw-relative">
3649                                      <picture
3650  x-data="PreloadImage"
3651  x-load
3652  class="tw-absolute tw-inset-0 tw-shadow"
3653>
3654  <span
3655    data-image-fallback
3656    aria-hidden="true"
3657    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3658  ></span>
3659    <img
3660    alt="A woman holds fodder beside her sheep." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3661    x-ref="preloadedImage"
3662    srcset="https://media-refresh.heifer.org/wp-content/uploads/SN201704-088-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.34&amp;fp-y=0.43 450w, https://media-refresh.heifer.org/wp-content/uploads/SN201704-088-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.34&amp;fp-y=0.43 480w, https://media-refresh.heifer.org/wp-content/uploads/SN201704-088-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.34&amp;fp-y=0.43 900w, https://media-refresh.heifer.org/wp-content/uploads/SN201704-088-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.34&amp;fp-y=0.43 960w"
3663    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3664    src="https://media-refresh.heifer.org/wp-content/uploads/SN201704-088-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.34&amp;fp-y=0.43"
3665    style=""
3666  />
3667</picture>                                  </figure>
3668                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3669        How Women Are Reshaping Senegal’s Sheep Economy
3670            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3671                    August 13, 2026
3672                  </p>
3673                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/women-farmers-livestock-senegal" target=_self>
3674        Read The Story
3675                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3676                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3677            </svg>
3678            </a>                              </article>
3679                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3680                <figure class="tw-aspect-standard tw-relative">
3681                                      <picture
3682  x-data="PreloadImage"
3683  x-load
3684  class="tw-absolute tw-inset-0 tw-shadow"
3685>
3686  <span
3687    data-image-fallback
3688    aria-hidden="true"
3689    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3690  ></span>
3691    <img
3692    alt="A woman stands inside a poultry house holding a tray of eggs." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3693    x-ref="preloadedImage"
3694    srcset="https://media-refresh.heifer.org/wp-content/uploads/210A0553-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.58&amp;fp-y=0.36 450w, https://media-refresh.heifer.org/wp-content/uploads/210A0553-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.58&amp;fp-y=0.36 480w, https://media-refresh.heifer.org/wp-content/uploads/210A0553-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.58&amp;fp-y=0.36 900w, https://media-refresh.heifer.org/wp-content/uploads/210A0553-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.58&amp;fp-y=0.36 960w"
3695    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3696    src="https://media-refresh.heifer.org/wp-content/uploads/210A0553-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.58&amp;fp-y=0.36"
3697    style=""
3698  />
3699</picture>                                  </figure>
3700                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3701        Finding Her Voice in Poultry Farming: The Journey of a Cambodian Woman Farmer
3702            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3703                    July 29, 2026
3704                  </p>
3705                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/cambodia-poultry-farmer-chin-tola" target=_self>
3706        Read The Story
3707                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3708                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3709            </svg>
3710            </a>                              </article>
3711                                                <article class="swiper-slide tw-w-full tw-flex-[0_0_auto] md:tw-w-1/3">
3712                <figure class="tw-aspect-standard tw-relative">
3713                                      <picture
3714  x-data="PreloadImage"
3715  x-load
3716  class="tw-absolute tw-inset-0 tw-shadow"
3717>
3718  <span
3719    data-image-fallback
3720    aria-hidden="true"
3721    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3722  ></span>
3723    <img
3724    alt="Damyanti Pangi (right) and Sumitra Pangi (left) pose together in a field while holding black turmeric roots." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3725    x-ref="preloadedImage"
3726    srcset="https://media-refresh.heifer.org/wp-content/uploads/IN202512-726-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=450&amp;h=300&amp;fp-x=0.54&amp;fp-y=0.48 450w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-726-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.54&amp;fp-y=0.48 480w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-726-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=900&amp;h=600&amp;fp-x=0.54&amp;fp-y=0.48 900w, https://media-refresh.heifer.org/wp-content/uploads/IN202512-726-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.54&amp;fp-y=0.48 960w"
3727    sizes="(min-width: 1536px) 450px, (min-width: 1024px) 30vw, (min-width: 768px) 45vw, 100vw"
3728    src="https://media-refresh.heifer.org/wp-content/uploads/IN202512-726-scaled.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.54&amp;fp-y=0.48"
3729    style=""
3730  />
3731</picture>                                  </figure>
3732                                  <h4 class="tw-text-h4 tw-text-soil-brown tw-mt-5">
3733        How One Woman in Rural Odisha Built More Than a Turmeric Business
3734            </h4 >                                                  <p class="tw-text-xs tw-mt-1 md:tw-mt-2">
3735                    July 14, 2026
3736                  </p>
3737                                                  <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-mt-2 tw-text-xs md:tw-leading-9 md:tw-text-sm" href="/blog/odisha-turmeric-business" target=_self>
3738        Read The Story
3739                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw-size-[1.5em]">
3740                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3741            </svg>
3742            </a>                              </article>
3743                              </div>
3744        <div class="carousel__nav--prev tw-aspect-standard">
3745          <button class="carousel__prev tw-bg-active-blue -tw-ml-5 md:tw-ml-0 tw-text-clarity-white tw-z-10">
3746            <span class="tw-sr-only">Previous Slide</span>
3747            <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-clarity-white tw-text-xl"></span>          </button>
3748        </div>
3749        <div class="carousel__nav--next tw-aspect-standard tw-right-0">
3750          <button class="carousel__next tw-bg-active-blue -tw-mr-5 md:tw-mr-0 tw-right-0 tw-text-clarity-white tw-z-10">
3751            <span class="tw-sr-only">Next Slide</span>
3752            <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white tw-text-xl"></span>          </button>
3753        </div>
3754      </div>
3755              <div class="tw-mt-10 tw-text-center">
3756        <a class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-5 tw-text-lg" href="/blog" target="_self">
3757                See All Stories
3758    </a>
3759      </div>
3760      </div>
3761</section>      
3762                
3763              <div class="tw-overflow-hidden tw-py-7 md:tw-pt-20 md:tw-pb-72" id="text-media-6abe1b4644299" data-block="text-media">
3764  <div class="tw-wrapper">
3765    <div class="tw-flex tw-flex-col md:tw-flex-row-reverse md:tw-items-start md:tw-justify-between">
3766      <div class="tw-relative md:tw-w-1/2 md:tw-translate-x-[8.33%] 2xl:tw-translate-x-[16.66%]">
3767                  <figure class="tw-aspect-standard tw-relative">
3768            <picture
3769  x-data="PreloadImage"
3770  x-load
3771  class="tw-absolute tw-inset-0 theme--clarity-white tw-bg-theme-background accent-box accent-box--left md:tw-right-9"
3772>
3773  <span
3774    data-image-fallback
3775    aria-hidden="true"
3776    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3777  ></span>
3778    <img
3779    alt="" loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3780    x-ref="preloadedImage"
3781    srcset="https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.47&amp;fp-y=0.48 480w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=512&amp;h=342&amp;fp-x=0.47&amp;fp-y=0.48 512w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=650&amp;h=434&amp;fp-x=0.47&amp;fp-y=0.48 650w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=768&amp;h=512&amp;fp-x=0.47&amp;fp-y=0.48 768w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=640&amp;fp-x=0.47&amp;fp-y=0.48 960w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1024&amp;h=683&amp;fp-x=0.47&amp;fp-y=0.48 1024w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1300&amp;h=867&amp;fp-x=0.47&amp;fp-y=0.48 1300w, https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=1536&amp;h=1025&amp;fp-x=0.47&amp;fp-y=0.48 1536w"
3782    sizes="(min-width: 1536px) 650px, (min-width: 1024px) 50vw, (min-width: 768px) 50vw, 100vw"
3783    src="https://media-refresh.heifer.org/wp-content/uploads/HF-corn.png?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=320&amp;fp-x=0.47&amp;fp-y=0.48"
3784    style=""
3785  />
3786</picture>          </figure>
3787                          <figure class="tw-absolute tw-aspect-vertical tw-bottom-0 tw-translate-y-11 tw-w-1/3 md:tw-left-0  md:tw-w-1/2 -tw-translate-x-wrapper-sm md:tw-translate-y-1/2 md:-tw-translate-x-2/3">
3788            <picture
3789  x-data="PreloadImage"
3790  x-load
3791  class="tw-absolute tw-inset-0"
3792>
3793  <span
3794    data-image-fallback
3795    aria-hidden="true"
3796    class="tw-absolute tw-inset-0 tw-bg-grand-blue"
3797  ></span>
3798    <img
3799    alt="Black woman standing in green dress smiling." loading="lazy" fetchpriority="low" class="tw-opacity-0 tw-w-full tw-h-full tw-object-cover"
3800    x-ref="preloadedImage"
3801    srcset="https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=256&amp;h=384&amp;fp-x=0.51&amp;fp-y=0.34 256w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=350&amp;h=525&amp;fp-x=0.51&amp;fp-y=0.34 350w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=384&amp;h=576&amp;fp-x=0.51&amp;fp-y=0.34 384w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=720&amp;fp-x=0.51&amp;fp-y=0.34 480w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=512&amp;h=768&amp;fp-x=0.51&amp;fp-y=0.34 512w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=700&amp;h=1050&amp;fp-x=0.51&amp;fp-y=0.34 700w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=768&amp;h=1152&amp;fp-x=0.51&amp;fp-y=0.34 768w, https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=960&amp;h=1440&amp;fp-x=0.51&amp;fp-y=0.34 960w"
3802    sizes="(min-width: 1536px) 350px, (min-width: 1024px) 25vw, (min-width: 768px) 25vw, 100vw"
3803    src="https://media-refresh.heifer.org/wp-content/uploads/WomanParticipant_original.jpg?or=0&amp;fit=crop&amp;crop=focalpoint&amp;auto=compress%2Cformat&amp;w=480&amp;h=720&amp;fp-x=0.51&amp;fp-y=0.34"
3804    style=""
3805  />
3806</picture>          </figure>
3807              </div>
3808      <div class="tw-pt-16 md:tw-pt-0 md:tw-w-1/3 tw-pt-10 md:tw-pt-0">
3809                  <h2 class="tw-text-h2 tw-text-soil-brown accent-line before:tw-hidden md:before:tw-block">
3810        The Power of <strong>Partnerships</strong>
3811            </h2 >                <div class="wysiwyg tw-mt-8 tw-text-theme-color md:tw-leading-8 md:tw-text-lg tw-leading-7">
3812        <p>Heifer is partnership-driven in the countries where we work – with farmer groups, businesses, governments and more – to scale impact and strengthen local ownership.</p>
3813<p>We offer a variety of ways to partner with us to improve the lives of farming families.</p>
3814    </div>    <div class="tw-flex tw-flex-col tw-gap-6 tw-mt-9 md:tw-flex-row ">
3815          <a class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base" href="/take-action/partners" target="_self">
3816                Partner with Heifer
3817    </a>
3818          </div>
3819      </div>
3820    </div>
3821  </div>
3822</div>      
3823                
3824              <section class="tw-py-10 md:tw-py-20 tw-bg-clarity-white" id="logo-grid-6abe1b4644721" data-block="logo-grid">
3825    <div class="tw-wrapper tw-text-center">
3826                                    <div class="logo-grid__grid tw-flex tw-flex-wrap tw-gap-14 tw-items-center tw-justify-center tw-mt-10">
3827                                    <figure class="logo-grid__item tw-col-span-2 tw-flex tw-items-center tw-justify-center tw-aspect-wide">
3828                        <img class="tw-w-auto tw-h-20" src="https://media-refresh.heifer.org/wp-content/uploads/accredited-charity-seal.jpg" alt="bbb accredited charity" />
3829                    </figure>
3830                                    <figure class="logo-grid__item tw-col-span-2 tw-flex tw-items-center tw-justify-center tw-aspect-wide">
3831                        <img class="tw-w-auto tw-h-20" src="https://media-refresh.heifer.org/wp-content/uploads/prize-lockup-horz-5e6a1b6f1b1567c1b0807d7fcbb994d9-768x180-1.png" alt="Conrad N Hilton Humanitarian Prize" />
3832                    </figure>
3833                                    <figure class="logo-grid__item tw-col-span-2 tw-flex tw-items-center tw-justify-center tw-aspect-wide">
3834                        <img class="tw-w-auto tw-h-20" src="https://media-refresh.heifer.org/wp-content/uploads/Four-Star_Rating_Badge_-_Full_Color.png" alt="Charity Navigator four star" />
3835                    </figure>
3836                                    <figure class="logo-grid__item tw-col-span-2 tw-flex tw-items-center tw-justify-center tw-aspect-wide">
3837                        <img class="tw-w-auto tw-h-20" src="https://media-refresh.heifer.org/wp-content/uploads/Guide-Star-profile-SILVER2022-seal.png" alt="Silver Transparency 2022" />
3838                    </figure>
3839                            </div>
3840            </div>
3841</section>      
3842                
3843              <section class="tw-py-10" id="wysiwyg-6abe1b46448f2" data-block="wysiwyg">
3844            <div class="tw-wrapper-wysiwyg">
3845            <div class="wysiwyg">
3846        <p><span>All gifts given will be triple matched until the match limit of $750,000 is met. Every $1 
3846you give will be matched with $2 for 3X the impact. Monthly gifts will be triple matched for the first 12 months. Gifts received after the match limit has been met will still directly fund our life-saving work worldwide.</span></p>
3847<p><span>Under IRS guidelines, the estimated value of the benefits received is not substantial; therefore, the full amount of your gift is a deductible contribution. Offer is good for monthly gifts of $20 or more. Please allow 12 weeks for delivery.</span></p>
3848    </div>        </div>
3849    </section>      
3850                                </main>
3851              
3852        <div
3853    x-data="ResourcesCart"
3854    x-cloak
3855    x-load
3856    x-show="isCartOpen"
3857    x-trap="isCartOpen"
3858    @keydown.escape.window="closeCart"
3859    id="resources-cart"
3860    class="tw-relative tw-z-50"
3861    aria-label="resources cart"
3862    role="dialog"
3863    aria-modal="true"
3864>
3865    
3866    <div
3867        class="tw-fixed tw-inset-0"
3868        x-on:click="closeCart"
3869    ></div>
3870
3871    
3872    <div class="tw-fixed tw-inset-0 tw-overflow-hidden tw-pointer-events-none">
3873        <div class="tw-absolute tw-inset-0 tw-overflow-hidden">
3874            <div class="tw-pointer-events-none tw-fixed tw-inset-y-0 tw-right-0 tw-flex tw-max-w-[420px] tw-w-full">
3875
3876                
3877                <div
3878                    class="tw-pointer-events-auto tw-w-full tw-bg-white tw-h-full tw-shadow-xl tw-flex tw-flex-col"
3879                    x-show="isCartOpen"
3880                    x-transition:enter="tw-transform tw-transition tw-ease-in-out tw-duration-300"
3881                    x-transition:enter-start="tw-translate-x-full"
3882                    x-transition:enter-end="tw-translate-x-0"
3883                    x-transition:leave="tw-transform tw-transition tw-ease-in-out tw-duration-300"
3884                    x-transition:leave-start="tw-translate-x-0"
3885                    x-transition:leave-end="tw-translate-x-full"
3886                    x-on:click.stop
3887                >
3888                    
3889                    <nav class="tw-relative tw-flex tw-justify-between tw-items-center tw-bg-grand-blue tw-text-white tw-p-4 tw-uppercase tw-text-sm">
3890                        <div class="tw-font-bold">
3891                            <span x-show="isCartStep">Your Resources Basket</span>
3892                            <span x-show="isShippingStep">Shipping Information</span>
3893                            <span x-show="isSuccessStep">Success</span>
3894                        </div>
3895
3896                        <div class="tw-flex tw-items-center tw-gap-3">
3897
3898                            <button
3899                                type="button"
3900                                x-show="showCloseIcon"
3901                                x-on:click="closeCart"
3902                                aria-label="Close cart."
3903                                class="tw-pointer-events-auto tw-inline-flex tw-items-center tw-justify-center tw-size-6"
3904                            >
3905                                <span aria-hidden="true" class="tw-icon sprite-close-circle-mask tw-bg-white tw-flex-shrink-0 !tw-size-full"></span>                            </button>
3906
3907                            
3908                            <div
3909                                x-show="showStepBullets"
3910                                class="form__navigation tw-pointer-events-auto tw-flex tw-items-center tw-gap-3"
3911                                aria-label="Checkout steps"
3912                            >
3913                                <span class="form__navigation--bullet" x-ref="stepBulletOne" aria-hidden="true"></span>
3914                                <span class="form__navigation--bullet" x-ref="stepBulletTwo" aria-hidden="true"></span>
3915                            </div>
3916
3917                        </div>
3918                    </nav>
3919
3920                    <div class="tw-flex-1 tw-overflow-y-auto tw-flex tw-flex-col">
3921                        <div x-show="isShippingStep">
3922                            <div x-show="cartHasItems" class="tw-bg-background-grey tw-py-4 tw-px-6">
3923                                <ul>
3924                                    <template x-for="row in shippingSummaryItems" :key="row.key">
3925                                        <li class="tw-py-3">
3926                                            <div class="tw-flex tw-items-start tw-justify-between tw-gap-4">
3927                                                <p class="tw-text-sm tw-font-bold" x-text="row.titleText"></p>
3928
3929                                                <button
3930                                                    type="button"
3931                                                    class="tw-block tw-text-grand-blue tw-underline tw-text-xs"
3932                                                    x-on:click="backToCart"
3933                                                    x-show="row.showEdit"
3934                                                >
3935                                                    Edit
3936                                                </button>
3937                                            </div>
3938
3939                                            <p class="tw-mt-1 tw-text-xs tw-text-neutral-700" x-text="row.qtyText"></p>
3940                                        </li>
3941                                    </template>
3942                                </ul>
3943                            </div>
3944                        </div>
3945
3946                        <div class="tw-px-6 tw-py-4 tw-flex tw-flex-col">
3947                            
3948                            <div x-show="isCartStep">
3949                                
3950                                <div
3951                                    x-show="cartIsEmpty"
3952                                    class="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-10"
3953                                >
3954                                    <p class="tw-text-xl tw-text-center">
3955                                        Resources cart is empty
3956                                    </p>
3957                                </div>
3958
3959                                
3960                                <ul class="tw-divide-y tw-divide-gray-200">
3961                                    <template x-for="(item, index) in resourcesCartItems" :key="item.id" hidden>
3962                                        <li 
3963    x-data="ResourcesCartItem"
3964    x-load
3965    class="tw-grid tw-grid-cols-[auto_minmax(0,1fr)] tw-gap-x-4 tw-px-2 tw-py-4"
3966    :data-product-id="item.id"
3967    :data-product-sku="item.sku" 
3968    :data-product-quantity="item.quantity"
3969    :data-product-type="item.type"
3970    :data-product-image="item.image"
3971>
3972    <div class="tw-self-stretch tw-size-24 tw-shrink-0 tw-overflow-hidden tw-rounded-md tw-border tw-border-gray-200 max-[375px]:tw-size-[72px]">
3973        <img :src="item.image" :alt="item.title" class="tw-size-full tw-object-cover">
3974    </div>
3975
3976    <div class="tw-self-stretch tw-min-w-0 tw-h-full tw-grid tw-grid-rows-[auto_1fr_auto] tw-gap-y-2">
3977
3978        <div class="tw-min-w-0">
3979            <div class="tw-flex tw-items-center tw-gap-x-2 tw-min-w-0">
3980                <a
3981                    :href="item.link"
3982                    x-text="item.title"
3983                    class="tw-font-bold tw-text-md tw-flex-1 tw-min-w-0 tw-uppercase tw-whitespace-normal tw-break-words"
3984                ></a>
3985                <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-active-blue tw-flex-shrink-0 tw-text-base"></span>            </div>
3986        </div>
3987
3988        <div class="tw-min-w-0 tw-flex tw-flex-col tw-justify-end">
3989            <template x-if="isAtMaxQuantity">
3990                <div class="tw-text-xs tw-text-rich-orange">
3991                    <span x-text="maxQuantityMessage"></span>
3992                </div>
3993            </template>
3994        </div>
3995
3996        <div class="tw-flex tw-items-end tw-justify-between tw-gap-x-4 tw-pb-1">
3997
3998            <div class="tw-text-xs tw-flex tw-flex-col tw-justify-end tw-gap-y-1">
3999                <template x-if="showQuantity">
4000                    <div @counterchange.window="updateQuantity">
4001                        Quantity: <span x-text="productQuantity"></span>
4002                    </div>
4003                </template>
4004
4005                <div>
4006                    <span>Free</span>
4007                </div>
4008            </div>
4009
4010            <div class="tw-flex-shrink-0 tw-justify-self-end">
4011                <div x-show="showEditOptions">
4012                    <div 
4013                        x-data="Counter" 
4014                        x-load="visible"
4015                        :data-target="item.sku"
4016                        class="tw-flex tw-items-center tw-gap-x-2"
4017                    >
4018                        <template x-if="quantityIsEqualToOne">
4019                            <button 
4020                                type="button" 
4021                                class="tw-font-medium tw-text-indigo-600 hover:tw-text-indigo-500"
4022                                aria-label="Remove item."
4023                                @click="removeItem"
4024                            >
4025                                <span aria-hidden="true" class="tw-icon sprite-trash-mask tw-bg-active-blue tw-flex-shrink-0 tw-text-base"></span>                            </button>
4026                        </template>
4027
4028                        <template x-if="quantityIsGreaterThanOne">
4029                            <button aria-label="Decrease quantity" type="button" @click="decreaseValue">
4030                                <span aria-hidden="true" class="tw-icon sprite-minus-mask tw-bg-active-blue"></span>                            </button>
4031                        </template>
4032
4033                        <input
4034                            x-ref="input"
4035                            type="number"
4036                            class="tw-w-14 tw-text-center"
4037                            min="1"
4038                            :max="maxQuantity"
4039                            :value="productQuantity"
4040                            name="quantity"
4041                            @change="handleInputChange"
4042                        />
4043
4044                        <button
4045                            aria-label="Increase quantity"
4046                            type="button"
4047                            x-on:click="increaseValue"
4048                            x-bind:disabled="increaseBtnDisabled"
4049                            x-bind:class="increaseBtnClass"
4050                        >
4051                            <span aria-hidden="true" class="tw-icon sprite-plus-mask tw-bg-active-blue"></span>                        </button>
4052                    </div>
4053                </div>
4054            </div>
4055        </div>
4056    </div>
4057</li>                                    </template>
4058                                </ul>
4059                            </div>
4060
4061                            
4062                            <form id="resources-shipping-form" x-show="isShippingStep" @submit.prevent="submitShipping" class="tw-w-full">
4063                                <input type="hidden" name="_token" value="Aai
4063HQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_1vBD1lQPDYwQ356j_wrap"  style="display: none" aria-hidden="true">
4064        <input id="voight-kampff_1vBD1lQPDYwQ356j"
4065               name="voight-kampff_1vBD1lQPDYwQ356j"
4066               type="text"
4067               value=""
4068                              autocomplete="nope"
4069               tabindex="-1">
4070        <input name="valid_from"
4071               type="text"
4072               value="eyJpdiI6InMrYmd2MEZxM0RhYWlxbTI5bVdjNlE9PSIsInZhbHVlIjoiaXMyMmlUZ1l6MTliWVpwdWtlZGI3Zz09IiwibWFjIjoiZDg0YmE2ZTMzNWZiYjYxNjYyYjhjMjhjNzVjZDVjMTI3N2E2MGZkNDcwYjcwM2Y2OGUzNTU2MDI3ZDVlNDNiOCIsInRhZyI6IiJ9"
4073                              autocomplete="off"
4074               tabindex="-1">
4075    </div>
4076                                    
4077                                <fieldset class="form__fieldset">
4078                                    <legend class="!tw-pt-0">Your Information</legend>
4079
4080                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="firstName-6abe1b46459dd">
4081  <label class="form__label" for="firstName-6abe1b46459dd" 
4082  >
4083    First Name<span x-show="required">*</span>
4084  </label>
4085  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="given-name" id="firstName-6abe1b46459dd" name="firstName" placeholder="" required="required" />
4086
4087<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4088  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="firstName-6abe1b46459dd--error" x-text="errorText"></div>
4089  </div>
4090                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="lastName-6abe1b46459dd">
4091  <label class="form__label" for="lastName-6abe1b46459dd" 
4092  >
4093    Last Name<span x-show="required">*</span>
4094  </label>
4095  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="family-name" id="lastName-6abe1b46459dd" name="lastName" placeholder="" required="required" />
4096
4097<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4098  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="lastName-6abe1b46459dd--error" x-text="errorText"></div>
4099  </div>
4100                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="email-6abe1b46459dd">
4101  <label class="form__label" for="email-6abe1b46459dd" 
4102  >
4103    Email<span x-show="required">*</span>
4104  </label>
4105  <input class="form__element" type="email" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="email" id="email-6abe1b46459dd" name="email" placeholder="Ex: [email protected]" required="required" />
4106
4107<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4108  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="email-6abe1b46459dd--error" x-text="errorText"></div>
4109  </div>
4110                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="phone-6abe1b46459dd">
4111  <label class="form__label" for="phone-6abe1b46459dd" 
4112  >
4113    Phone (Optional)<span x-show="required">*</span>
4114  </label>
4115  <input class="form__element" type="phone" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="tel" id="phone-6abe1b46459dd" name="phone" placeholder="Ex: 123-456-7890" />
4116
4117<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
4117d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4118  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="phone-6abe1b46459dd--error" x-text="errorText"></div>
4119  </div>
4120                                    <label for="phone-opt-in-6abe1b46459dd">
4121                                        <div class="tw-mt-4">
4122                                            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
4123    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" name="phone_opt_in" id="phone-opt-in-6abe1b46459dd">
4124    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo tw-mb-auto tw-mt-1 tw-border-2 tw-size-4">
4125        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
4126    <label for="phone-opt-in-6abe1b46459dd" class="tw-ml-2 tw-text-sm">
4127        <span class="wysiwyg">
4128                                                    By providing your mobile phone number you agree that Heifer may contact you by phone and/or text message regarding Heifer news and updates. You can opt-out at any time. See
4129                                                    <a href="/privacy-policy" target="_blank" class="tw-relative tw-z-10">privacy policy</a>
4130                                                    for details.
4131                                                </span>
4132    </label>
4133    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="phone-opt-in-6abe1b46459dd--error" x-text="errorText"></div>
4134</div>                                        </div>
4135                                    </label>
4136
4137                                    <legend>Shipping Information</legend>
4138
4139                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address1-6abe1b46459dd">
4140  <label class="form__label" for="address1-6abe1b46459dd" 
4141  >
4142    Address 1<span x-show="required">*</span>
4143  </label>
4144  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="address1-6abe1b46459dd" name="address1" placeholder="Address 1" required="required" />
4145
4146<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4147  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address1-6abe1b46459dd--error" x-text="errorText"></div>
4148  </div>
4149                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address2-6abe1b46459dd">
4150  <label class="form__label" for="address2-6abe1b46459dd" 
4151  >
4152    Address 2<span x-show="required">*</span>
4153  </label>
4154  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="address2-6abe1b46459dd" name="address2" placeholder="Address 2" />
4155
4156<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4157  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address2-6abe1b46459dd--error" x-text="errorText"></div>
4158  </div>
4159                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="city-6abe1b46459dd">
4160  <label class="form__label" for="city-6abe1b46459dd" 
4161  >
4162    City<span x-show="required">*</span>
4163  </label>
4164  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="city-6abe1b46459dd" name="city" placeholder="City" required="required" />
4165
4166<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
4166d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4167  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="city-6abe1b46459dd--error" x-text="errorText"></div>
4168  </div>
4169                                    <div x-data="StateSelect" x-load data-target="state">
4170      <template x-if="showAU">
4171      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-AU-6abe1b4645fa9">
4172  <label class="form__label" for="state-AU-6abe1b4645fa9" 
4173  >
4174    State<span x-show="required">*</span>
4175  </label>
4176  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-AU-6abe1b4645fa9" name="state" required="required">
4177      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
4178      <option label="New South Wales" value="NSW" >New South Wales</option>
4179      <option label="Northern Territory" value="NT" >Northern Territory</option>
4180      <option label="Queensland" value="QLD" >Queensland</option>
4181      <option label="South Australia" value="SA" >South Australia</option>
4182      <option label="Tasmania" value="TAS" >Tasmania</option>
4183      <option label="Victoria" value="VIC" >Victoria</option>
4184      <option label="Western Australia" value="WA" >Western Australia</option>
4185  </select>
4186  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-AU-6abe1b4645fa9--error" x-text="errorText"></div>
4187  </div>    </template>
4188      <template x-if="showCA">
4189      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-CA-6abe1b4645fa9">
4190  <label class="form__label" for="state-CA-6abe1b4645fa9" 
4191  >
4192    Province<span x-show="required">*</span>
4193  </label>
4194  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-CA-6abe1b4645fa9" name="state" required="required">
4195      <option label="Alberta" value="AB" >Alberta</option>
4196      <option label="British Columbia" value="BC" >British Columbia</option>
4197      <option label="Manitoba" value="MB" >Manitoba</option>
4198      <option label="New Brunswick" value="NB" >New Brunswick</option>
4199      <option label="Newfoundland" value="NF" >Newfoundland</option>
4200      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
4201      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
4202      <option label="Nunavut" value="NU" >Nunavut</option>
4203      <option label="Ontario" value="ON" >Ontario</option>
4204      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
4205      <option label="Quebec" value="QC" >Quebec</option>
4206      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
4207      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
4208  </select>
4209  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-CA-6abe1b4645fa9--error" x-text="errorText"></div>
4210  </div>    </template>
4211      <template x-if="showUS">
4212      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-US-6abe1b4645fa9">
4213  <label class="form__label" for="state-US-6abe1b4645fa9" 
4214  >
4215    State<span x-show="required">*</span>
4216  </label>
4217  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-US-6abe1b4645fa9" name="state" required="required">
4218      <option label="Alabama" value="AL" >Alabama</option>
4219      <option label="Alaska" value="AK" >Alaska</option>
4220      <option label="Arizona" value="AZ" >Arizona</option>
4221      <option label="Arkansas" value="AR" >Arkansas</option>
4222      <option label="California" value="CA" >California</option>
4223      <option label="Colorado" value="CO" >Colorado</option>
4224      <option label="Connecticut" value="CT" >Connecticut</option>
4225      <option label="Delaware" value="DE" >Delaware</option>
4226      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
4227      <option label="Florida" value="FL" >Florida</option>
4228      <option label="Georgia" value="GA" >Georgia</option>
4229      <option label="Hawaii" value="HI" >Hawaii</option>
4230      <option label="Idaho" value="ID" >Idaho</option>
4231      <option label="Illinois" value="IL" >Illinois</option>
4232      <option label="Indiana" value="IN" >Indiana</option>
4233      <option label="Iowa" value="IA" >Iowa</option>
4234      <option label="Kansas" value="KS" >Kansas</option>
4235      <option label="Kentucky" value="KY" >Kentucky</option>
4236      <option label="Louisiana" value="LA" >Louisiana</option>
4237      <option label="Maine" value="ME" >Maine</option>
4238      <option label="Maryland" value="MD" >Maryland</option>
4239      <option label="Massachusetts" value="MA" >Massachusetts</option>
4240      <option label="Michigan" value="MI" >Michigan</option>
4241      <option label="Minnesota" value="MN" >Minnesota</option>
4242      <option label="Mississippi" value="MS" >Mississippi</option>
4243      <option label="Missouri" value="MO" >Missouri</option>
4244      <option label="Montana" value="MT" >Montana</option>
4245      <option label="Nebraska" value="NE" >Nebraska</option>
4246      <option label="Nevada" value="NV" >Nevada</option>
4247      <option label="New Hampshire" value="NH" >New Hampshire</option>
4248      <option label="New Jersey" value="NJ" >New Jersey</option>
4249      <option label="New Mexico" value="NM" >New Mexico</option>
4250      <option label="New York" value="NY" >New York</option>
4251      <option label="North Carolina" value="NC" >North Carolina</option>
4252      <option label="North Dakota" value="ND" >North Dakota</option>
4253      <option label="Ohio" value="OH" >Ohio</option>
4254      <option label="Oklahoma" value="OK" >Oklahoma</option>
4255      <option label="Oregon" value="OR" >Oregon</option>
4256      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
4257      <option label="Rhode Island" value="RI" >Rhode Island</option>
4258      <option label="South Carolina" value="SC" >South Carolina</option>
4259      <option label="South Dakota" value="SD" >South Dakota</option>
4260      <option label="Tennessee" value="TN" >Tennessee</option>
4261      <option label="Texas" value="TX" >Texas</option>
4262      <option label="Utah" value="UT" >Utah</option>
4263      <option label="Vermont" value="VT" >Vermont</option>
4264      <option label="Virginia" value="VA" >Virginia</option>
4265      <option label="Washington" value="WA" >Washington</option>
4266      <option label="West Virginia" value="WV" >West Virginia</option>
4267      <option label="Wisconsin" value="WI" >Wisconsin</option>
4268      <option label="Wyoming" value="WY" >Wyoming</option>
4269  </select>
4270  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-US-6abe1b4645fa9--error" x-text="errorText"></div>
4271  </div>    </template>
4272    <template x-if="showOther">
4273    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b4645fa9">
4274  <label class="form__label" for="state-other-US-6abe1b4645fa9" 
4275  >
4276    State/Province<span x-show="required">*</span>
4277  </label>
4278  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b4645fa9" name="state" placeholder="State/Province" selectedOption="" required="required" />
4279
4280<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
4280d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4281  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b4645fa9--error" x-text="errorText"></div>
4282  </div>  </template>
4283</div>
4284
4285                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="postcode-6abe1b46459dd">
4286  <label class="form__label" for="postcode-6abe1b46459dd" 
4287  >
4288    Zip<span x-show="required">*</span>
4289  </label>
4290  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="postcode-6abe1b46459dd" name="postcode" autocomplete="postal-code" autocorrect="off" required="required" />
4291
4292<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
4293  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="postcode-6abe1b46459dd--error" x-text="errorText"></div>
4294  </div>
4295                                    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="countries-6abe1b46459dd">
4296  <label class="form__label" for="countries-6abe1b46459dd" 
4297  >
4298    Country<span x-show="required">*</span>
4299  </label>
4300  <div x-data="CountrySelect" x-load data-trigger="state">
4301    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="country-6abe1b46462e9">
4302  <label class="form__label" for="country-6abe1b46462e9" 
4303  >
4304    Country<span x-show="required">*</span>
4305  </label>
4306  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="country-6abe1b46462e9" name="country" required="required">
4307      <option label="United States" value="US" >United States</option>
4308      <option label="Afghanistan" value="AF" >Afghanistan</option>
4309      <option label="Åland Islands" value="AX" >Åland Islands</option>
4310      <option label="Albania" value="AL" >Albania</option>
4311      <option label="Algeria" value="DZ" >Algeria</option>
4312      <option label="American Samoa" value="AS" >American Samoa</option>
4313      <option label="Andorra" value="AD" >Andorra</option>
4314      <option label="Angola" value="AO" >Angola</option>
4315      <option label="Anguilla" value="AI" >Anguilla</option>
4316      <option label="Antarctica" value="AQ" >Antarctica</option>
4317      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
4318      <option label="Argentina" value="AR" >Argentina</option>
4319      <option label="Armenia" value="AM" >Armenia</option>
4320      <option label="Aruba" value="AW" >Aruba</option>
4321      <option label="Australia" value="AU" >Australia</option>
4322      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
4323      <option label="Bahamas" value="BS" >Bahamas</option>
4324      <option label="Bahrain" value="BH" >Bahrain</option>
4325      <option label="Bangladesh" value="BD" >Bangladesh</option>
4326      <option label="Barbados" value="BB" >Barbados</option>
4327      <option label="Belarus" value="BY" >Belarus</option>
4328      <option label="Belize" value="BZ" >Belize</option>
4329      <option label="Benin" value="BJ" >Benin</option>
4330      <option label="Bermuda" value="BM" >Bermuda</option>
4331      <option label="Bhutan" value="BT" >Bhutan</option>
4332      <option label="Bolivia" value="BO" >Bolivia</option>
4333      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
4334      <option label="Botswana" value="BW" >Botswana</option>
4335      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
4336      <option label="Brazil" value="BR" >Brazil</option>
4337      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
4338      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
4339      <option label="Brunei" value="BN" >Brunei</option>
4340      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
4341      <option label="Burundi" value="BI" >Burundi</option>
4342      <option label="Cambodia" value="KH" >Cambodia</option>
4343      <option label="Cameroon" value="CM" >Cameroon</option>
4344      <option label="Canada" value="CA" >Canada</option>
4345      <option label="Cape Verde" value="CV" >Cape Verde</option>
4346      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
4347      <option label="Central African Republic" value="CF" >Central African Republic</option>
4348      <option label="Chad" value="TD" >Chad</option>
4349      <option label="Chile" value="CL" >Chile</option>
4350      <option label="Christmas Island" value="CX" >Christmas Island</option>
4351      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
4352      <option label="Colombia" value="CO" >Colombia</option>
4353      <option label="Comoros" value="KM" >Comoros</option>
4354      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
4355      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
4356      <option label="Cook Islands" value="CK" >Cook Islands</option>
4357      <option label="Costa Rica" value="CR" >Costa Rica</option>
4358      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
4359      <option label="Djibouti" value="DJ" >Djibouti</option>
4360      <option label="Dominica" value="DM" >Dominica</option>
4361      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
4362      <option label="Ecuador" value="EC" >Ecuador</option>
4363      <option label="Egypt" value="EG" >Egypt</option>
4364      <option label="El Salvador" value="SV" >El Salvador</option>
4365      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
4366      <option label="Eritrea" value="ER" >Eritrea</option>
4367      <option label="Ethiopia" value="ET" >Ethiopia</option>
4368      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
4369      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
4370      <option label="Fiji" value="FJ" >Fiji</option>
4371      <option label="French Guiana" value="GF" >French Guiana</option>
4372      <option label="French Polynesia" value="PF" >French Polynesia</option>
4373      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
4374      <option label="Gabon" value="GA" >Gabon</option>
4375      <option label="Gambia" value="GM" >Gambia</option>
4376      <option label="Georgia" value="GE" >Georgia</option>
4377      <option label="Ghana" value="GH" >Ghana</option>
4378      <option label="Gibraltar" value="GI" >Gibraltar</option>
4379      <option label="Greenland" value="GL" >Greenland</option>
4380      <option label="Grenada" value="GD" >Grenada</option>
4381      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
4382      <option label="Guam" value="GU" >Guam</option>
4383      <option label="Guatemala" value="GT" >Guatemala</option>
4384      <option label="Guernsey" value="GG" >Guernsey</option>
4385      <option label="Guinea" value="GN" >Guinea</option>
4386      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
4387      <option label="Guyana" value="GY" >Guyana</option>
4388      <option label="Haiti" value="HT" >Haiti</option>
4389      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
4390      <option label="Honduras" value="HN" >Honduras</option>
4391      <option label="India" value="IN" >India</option>
4392      <option label="Indonesia" value="ID" >Indonesia</option>
4393      <option label="Iraq" value="IQ" >Iraq</option>
4394      <option label="Isle of Man" value="IM" >Isle of Man</option>
4395      <option label="Israel" value="IL" >Israel</option>
4396      <option label="Jamaica" value="JM" >Jamaica</option>
4397      <option label="Japan" value="JP" >Japan</option>
4398      <option label="Jersey" value="JE" >Jersey</option>
4399      <option label="Jordan" value="JO" >Jordan</option>
4400      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
4401      <option label="Kenya" value="KE" >Kenya</option>
4402      <option label="Kiribati" value="KI" >Kiribati</option>
4403      <option label="Kuwait" value="KW" >Kuwait</option>
4404      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
4405      <option label="Laos" value="LA" >Laos</option>
4406      <option label="Lebanon" value="LB" >Lebanon</option>
4407      <option label="Lesotho" value="LS" >Lesotho</option>
4408      <option label="Liberia" value="LR" >Liberia</option>
4409      <option label="Libya" value="LY" >Libya</option>
4410      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
4411      <option label="Macedonia" value="MK" >Macedonia</option>
4412      <option label="Madagascar" value="MG" >Madagascar</option>
4413      <option label="Malawi" value="MW" >Malawi</option>
4414      <option label="Malaysia" value="MY" >Malaysia</option>
4415      <option label="Maldives" value="MV" >Maldives</option>
4416      <option label="Mali" value="ML" >Mali</option>
4417      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
4418      <option label="Martinique" value="MQ" >Martinique</option>
4419      <option label="Mauritania" value="MR" >Mauritania</option>
4420      <option label="Mauritius" value="MU" >Mauritius</option>
4421      <option label="Mayotte" value="YT" >Mayotte</option>
4422      <option label="Mexico" value="MX" >Mexico</option>
4423      <option label="Micronesia" value="FM" >Micronesia</option>
4424      <option label="Moldova" value="MD" >Moldova</option>
4425      <option label="Monaco" value="MC" >Monaco</option>
4426      <option label="Mongolia" value="MN" >Mongolia</option>
4427      <option label="Montenegro" value="ME" >Montenegro</option>
4428      <option label="Montserrat" value="MS" >Montserrat</option>
4429      <option label="Morocco" value="MA" >Morocco</option>
4430      <option label="Mozambique" value="MZ" >Mozambique</option>
4431      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
4432      <option label="Namibia" value="NA" >Namibia</option>
4433      <option label="Nauru" value="NR" >Nauru</option>
4434      <option label="Nepal" value="NP" >Nepal</option>
4435      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
4436      <option label="New Caledonia" value="NC" >New Caledonia</option>
4437      <option label="New Zealand" value="NZ" >New Zealand</option>
4438      <option label="Nicaragua" value="NI" >Nicaragua</option>
4439      <option label="Niger" value="NE" >Niger</option>
4440      <option label="Nigeria" value="NG" >Nigeria</option>
4441      <option label="Niue" value="NU" >Niue</option>
4442      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
4443      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
4444      <option label="Oman" value="OM" >Oman</option>
4445      <option label="Pakistan" value="PK" >Pakistan</option>
4446      <option label="Palau" value="PW" >Palau</option>
4447      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
4448      <option label="Panama" value="PA" >Panama</option>
4449      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
4450      <option label="Paraguay" value="PY" >Paraguay</option>
4451      <option label="Peru" value="PE" >Peru</option>
4452      <option label="Philippines" value="PH" >Philippines</option>
4453      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
4454      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
4455      <option label="Qatar" value="QA" >Qatar</option>
4456      <option label="Réunion" value="RE" >Réunion</option>
4457      <option label="Rwanda" value="RW" >Rwanda</option>
4458      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
4459      <option label="Saint Helena" value="SH" >Saint Helena</option>
4460      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
4461      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
4462      <option label="Saint Martin" value="MF" >Saint Martin</option>
4463      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
4464      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
4465      <option label="Samoa" value="WS" >Samoa</option>
4466      <option label="San Marino" value="SM" >San Marino</option>
4467      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
4468      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
4469      <option label="Senegal" value="SN" >Senegal</option>
4470      <option label="Serbia" value="RS" >Serbia</option>
4471      <option label="Seychelles" value="SC" >Seychelles</option>
4472      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
4473      <option label="Singapore" value="SG" >Singapore</option>
4474      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
4475      <option label="Somalia" value="SO" >Somalia</option>
4476      <option label="South Africa" value="ZA" >South Africa</option>
4477      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
4478      <option label="South Korea" value="KR" >South Korea</option>
4479      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
4480      <option label="Sudan" value="SD" >Sudan</option>
4481      <option label="Suriname" value="SR" >Suriname</option>
4482      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
4483      <option label="Swaziland" value="SZ" >Swaziland</option>
4484      <option label="Switzerland" value="CH" >Switzerland</option>
4485      <option label="Taiwan" value="TW" >Taiwan</option>
4486      <option label="Tajikistan" value="TJ" >Tajikistan</option>
4487      <option label="Tanzania" value="TZ" >Tanzania</option>
4488      <option label="Thailand" value="TH" >Thailand</option>
4489      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
4490      <option label="Togo" value="TG" >Togo</option>
4491      <option label="Tokelau" value="TK" >Tokelau</option>
4492      <option label="Tonga" value="TO" >Tonga</option>
4493      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
4494      <option label="Tunisia" value="TN" >Tunisia</option>
4495      <option label="Turkey" value="TR" >Turkey</option>
4496      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
4497      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
4498      <option label="Tuvalu" value="TV" >Tuvalu</option>
4499      <option label="Uganda" value="UG" >Uganda</option>
4500      <option label="Ukraine" value="UA" >Ukraine</option>
4501      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
4502      <option label="Uruguay" value="UY" >Uruguay</option>
4503      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
4504      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
4505      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
4506      <option label="Vanuatu" value="VU" >Vanuatu</option>
4507      <option label="Vatican City" value="VA" >Vatican City</option>
4508      <option label="Vietnam" value="VN" >Vietnam</option>
4509      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
4510      <option label="Western Sahara" value="EH" >Western Sahara</option>
4511      <option label="Yemen" value="YE" >Yemen</option>
4512      <option label="Zambia" value="ZM" >Zambia</option>
4513      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
4514  </select>
4515  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="country-6abe1b46462e9--error" x-text="errorText"></div>
4516  </div></div>
4517  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="countries-6abe1b46459dd--error" x-text="errorText"></div>
4518  </div>                                </fieldset>
4519                                
4520                                <div class="tw-h-24"></div>
4521                            </form>
4522                            
4523                            <div x-show="isSuccessStep">
4524                                <p class="tw-text-lg tw-font-bold tw-mb-2">
4525                                    All set!
4526                                </p>
4527    
4527                            <p class="tw-text-sm">
4528                                    Your order information was received. Your free resources will be shipped to you at the address provided.
4529                                </p>
4530
4531                                <div class="tw-mt-6" x-show="hasOrderedResources">
4532                                    <p class="tw-text-sm tw-font-bold tw-mb-3">Items ordered:</p>
4533
4534                                    <ul class="tw-space-y-2">
4535                                        <li class="tw-flex tw-justify-between tw-px-3 tw-text-xs tw-font-bold tw-uppercase tw-text-gray-600">
4536                                            <span>Title</span>
4537                                            <span>Quantity</span>
4538                                        </li>
4539
4540                                        <li class="tw-border-t tw-border-disabled-grey"></li>
4541
4542                                        <template x-for="res in orderedResourcesForDisplay" :key="res.key">
4543                                            <li class="tw-flex tw-items-center tw-gap-4 tw-border tw-border-disabled-grey tw-rounded tw-p-3">
4544
4545                                                <img
4546                                                    x-show="res.imageUrl"
4547                                                    x-bind:src="res.imageUrl"
4548                                                    x-bind:alt="res.name"
4549                                                    class="tw-w-16 tw-h-16 tw-object-cover tw-rounded"
4550                                                >
4551
4552                                                <div class="tw-flex-1 tw-min-w-0">
4553                                                    <div class="tw-flex tw-items-start tw-justify-between tw-gap-4">
4554                                                        <span class="tw-text-sm" x-text="res.name"></span>
4555                                                        <span class="tw-text-sm tw-font-bold tw-shrink-0" x-text="res.quantityText"></span>
4556                                                    </div>
4557                                                </div>
4558
4559                                            </li>
4560                                        </template>
4561                                    </ul>
4562                                </div>
4563                            </div>
4564                        </div>
4565                    </div>
4566
4567                    <div class="tw-mt-auto tw-border-t tw-border-disabled-grey tw-p-6 tw-bg-white" x-show="showFooter">
4568                        <div class="tw-text-center tw-mb-4" x-show="isCartStep">
4569                            <p class="tw-uppercase tw-text-sm tw-font-grand-blue tw-font-800">Did you know?</p>
4570                            <p class="tw-text-xs">You can add multiple resources to this cart! Feel free to keep browsing, add more resources, and get all of your resources in one package. Easy!</p>
4571                        </div>
4572                        <div class="tw-flex tw-justify-between tw-text-lg tw-uppercase tw-mb-4" x-show="isCartStep">
4573                            <span>Total:</span>
4574                            <span class="tw-font-bold">Free</span>
4575                        </div>
4576
4577                        <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-w-full" x-show="isCartStep" x-on:click="beginCheckout" type="button">
4578                <span>Proceed To Order</span>
4579                    <span class="loader"></span>
4580            </button>
4581
4582                        <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-w-full" x-show="isShippingStep" type="submit" form="resources-shipping-form" x-bind:disabled="isSubmitting">
4583                Place Order
4584                    <span class="loader"></span>
4585            </button>
4586
4587                        <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-5 tw-text-lg tw-flex tw-font-bold tw-justify-center tw-items-center tw-w-full" x-show="isSuccessStep" type="button" x-on:click="closeCart">
4588                Close
4589            </button>
4590
4591                        <div class="tw-text-center">
4592                            <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-[15px] tw-text-center tw-uppercase" @click="closeCart" @keydown.enter="closeCart" @keydown.space="closeCart" tabindex="0" type="button" role="button" target=_self>
4593        Keep Browsing
4594             </a>                        </div>
4595
4596                    </div>
4597
4598                </div>
4599            </div>
4600        </div>
4601    </div>
4602</div>        <div
4603    x-data="Cart"
4604    x-cloak
4605    x-load
4606    x-show="isCartOpen"
4607    x-trap="isCartOpen"
4608    @keydown.escape="closeCart"
4609    id="cart"
4610    class="tw-relative tw-z-50"
4611    aria-label="cart"
4612    role="dialog"
4613    aria-modal="true"
4614>
4615    
4616    <div
4617        x-transition:enter="tw-ease-in-out tw-duration-500 sm:tw-duration-700"
4618        x-transition:enter-start="tw-opacity-0"
4619        x-transition:enter-end="tw-opacity-100"
4620        x-transition:leave="tw-ease-in-out tw-duration-500 sm:tw-duration-700"
4621        x-transition:leave-start="tw-opacity-100"
4622        x-transition:leave-end="tw-opacity-0"
4623        class="tw-fixed tw-inset-0 tw-bg-gray-500/75 tw-transition-opacity"
4624        :aria-hidden="isCartOpen"
4625    ></div>
4626
4627    
4628    <div class="tw-fixed tw-inset-0 tw-overflow-hidden">
4629      <div class="tw-absolute tw-inset-0 tw-overflow-hidden">
4630        <div class="tw-pointer-events-none tw-fixed tw-inset-y-0 tw-right-0 tw-flex tw-max-w-[420px] tw-w-full md:tw-min-w-[420px]">
4631          <div
4632              x-show="isCartOpen"
4633              x-transition:enter="tw-transform tw-transition tw-ease-in-out tw-duration-500 sm:tw-duration-700"
4634              x-transition:enter-start="tw-translate-x-full"
4635              x-transition:enter-end="tw-translate-x-0"
4636              x-transition:leave="tw-transform tw-transition tw-ease-in-out tw-duration-500 sm:tw-duration-700"
4637              x-transition:leave-start="tw-translate-x-0"
4638              x-transition:leave-end="tw-translate-x-full"
4639              class="tw-pointer-events-auto tw-w-full"
4640              @click.outside="closeCart"
4641            >
4642
4643            
4644            <div class="tw-h-full tw-bg-white tw-flex tw-flex-col tw-shadow-xl" x-show="cartIsEmpty">
4645              
4646              <nav aria-label="Cart Navigation" class="form__navigation tw-flex tw-font-bold tw-justify-between tw-bg-grand-blue tw-flex tw-px-4 tw-py-3 tw-items-center tw-text-sm tw-text-white">
4647                <div class="tw-uppercase tw-bold">Your Basket</div>
4648                
4649                <button @click="closeCart" aria-label="Close cart." class="close-cart-button tw-flex tw-h-full tw-items-center tw-right-2 tw-size-5 tw-top-0">
4650                  <span aria-hidden="true" class="tw-icon sprite-close-circle-mask tw-bg-white tw-flex-shrink-0 !tw-size-full"></span>                </button>
4651              </nav>
4652
4653              <div class="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-10">
4654                <p class="tw-text-xl">Cart is empty</p>
4655              </div>
4656            </div>
4657
4658            
4659
4660            <div
4661                x-data="DonationCheckout"
4662                x-load="visible"
4663                x-show="cartHasItems"
4664                class="tw-h-full tw-bg-white tw-shadow-xl"
4665                data-steps="{&quot;one-time&quot;:[1,2,3,4],&quot;monthly&quot;:[1,2,3],&quot;yearly&quot;:[1,2,3],&quot;free&quot;:[1,3]}"
4666                data-cart-checkout
4667              >
4668                <div
4669    x-data="MultistepForm" 
4670    x-load
4671    x-ref="form"
4672    id="multistepForm-6abe1b4646635"
4673    data-frequency=monthly
4674    data-steps={&quot;one-time&quot;:[1,2,3,4],&quot;monthly&quot;:[1,2,3],&quot;yearly&quot;:[1,2,3],&quot;free&quot;:[1,3]}
4675    data-payment-method="credit-card"
4676    data-payment-processor=blackbaud
4677    class="theme--clarity-white tw-bg-theme-background tw-border-[3px] tw-border-vista-blue tw-border-none tw-flex tw-flex-col tw-size-full"
4678>
4679    
4680    <template x-teleport="body">
4681        <div 
4682            x-show="showProcessingOverlay"
4683            class="tw-bg-black/[.8] tw-flex tw-fixed tw-h-full tw-justify-center tw-items-center tw-left-0 tw-top-0 tw-w-full tw-z-50"
4684        >
4685            <div class="tw-text-center tw-text-white"> 
4686                <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-white tw-text-4xl"></span>                <p class="tw-mt-2">
4687                    Success!
4688                </p>
4689                <p class="tw-mt-2 tw-text-base">
4690                    Please be patient while we send you to a confirmation page.
4691                </p>
4692            </div>
4693        </div>
4694    </template>
4695    <div class="tw-flex tw-flex-col tw-h-full  tw-overflow-x-hidden tw-overflow-y-auto">
4696        <div class="form__header tw-relative">
4697            
4698            <div 
4699                x-show="hasErrors"
4700                x-cloak
4701                class="form__errors tw-bg-alert-red tw-p-2 tw-text-sm tw-text-white"
4702            >
4703                <p class="tw-mt-[14px]">We are unable to process your request. Please try again, or view common solutions on <a href="/support/troubleshooting" class="link__inline tw-text-white" target="_blank">our help page.</a> You can also contact our Donor Services team at 855.9HUNGER (855.948.6437).</p>
4704            </div>
4705            
4706                            <nav aria-label="Multistep Form Navigation" class="form__navigation tw-flex tw-font-bold tw-gap-x-2 tw-justify-between tw-flex tw-px-4 tw-py-3 tw-items-center tw-text-sm">
4707                    
4708                    
4709                    
4710                    <div class="tw-uppercase tw-bold" x-text="stepTitle"></div>
4711
4712                    
4713                    <ul class="tw-flex tw-flex-1 tw-gap-x-2 tw-justify-end">
4714                        <template x-for="i in getSteps">
4715                            <li
4716                                class="form__navigation--bullet"
4717                                :data-step="i"
4718                                x-effect="isActive">
4719                            </li>
4720                        </template>
4721                    </ul>
4722                </nav>
4723                                        <button @click="closeCart" aria-label="Close cart." class="close-cart-button tw-absolute tw-flex tw-hidden tw-h-full tw-items-center tw-right-2 tw-size-5 tw-top-0">
4724                        <span aria-hidden="true" class="tw-icon sprite-close-circle-mask tw-bg-white tw-flex-shrink-0"></span>                      </button>
4725
4726                      <div 
4727    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
4728    x-show="showSummary"
4729    x-cloak
4730    data-summary-step="1" 
4731    data-summary-title="" 
4732    data-summary-name="product"
4733>
4734        <div class="tw-flex tw-flex-col tw-flex-1">
4735                    <div class="tw-font-bold"></div>
4736                <ul 
4737                            x-data="CartSummary" 
4738                            x-load 
4739                            class="tw-space-y-4">
4740                            <template x-for="(item, index) in cartSummaries" :key="index">
4741                              <li class="first-of-type:!tw-mt-0">
4742                                <div class="tw-font-bold" x-text="item.title"></div>
4743                                <div>
4744                                  <div>
4745                                    <span x-text="item.frequencyText"></span>
4746                                    <span>-</span>
4747                                    <span x-text="item.amountText"></span>
4748                                  </div>
4749                                </div>
4750                              </li>
4751                            </template>
4752                          </ul>
4753                          
4754                          <template x-if="isOnetime">
4755                            <div x-show="hasProcessingFee" class="tw-text-xs">includes <span x-text="processingFeeDollarAmount"></span> to cover payment processing costs.</div>
4756                          </template>
4757    </div>
4758     
4759        <div class="ml-1">
4760            <button @click="handleSummaryEdit" class="tw-block tw-text-[var(--button-secondary-color)] tw-underline tw-text-xs">Edit</button>
4761        </div>
4762    </div>                      <div x-show="isGivingInHonor">
4763                        <div 
4764    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
4765    x-show="showSummary"
4766    x-cloak
4767    data-summary-step="1" 
4768    data-summary-title="Give in Honor" 
4769    data-summary-name="Give in Honor"
4770>
4771            <div class="tw-mr-[10px]">
4772            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
4773        <div class="tw-flex tw-flex-col tw-flex-1">
4774                    <div class="tw-font-bold">Give in Honor</div>
4775                <div class="tw-text-xs">
4776                            You&apos;ll have the opportunity to fill out a free card after your donation
4777                        </div>
4778    </div>
4779    </div>                      </div>
4780                      <div 
4781    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
4782    x-show="showSummary"
4783    x-cloak
4784    data-summary-step="3" 
4785    data-summary-title="Details" 
4786    data-summary-name="billing"
4787>
4788            <div class="tw-mr-[10px]">
4789            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
4790        <div class="tw-flex tw-flex-col tw-flex-1">
4791                    <div class="tw-font-bold">Details</div>
4792                <div>
4793                            <div>
4794                                <span data-summary-value="firstName"></span>
4795                                <span data-summary-value="lastName"></span>
4796                            </div>
4797                            <div data-summary-value="email"></div>
4798                            <div>
4799                                <span data-summary-value="address1"></span>
4800                                <span data-summary-value="address2"></span>
4801                                <span data-summary-value="city"></span>,
4802                                <span data-summary-value="state"></span>
4803                                <span data-summary-value="zipcode"></span>
4804                            </div>
4805                        </div>
4806    </div>
4807     
4808        <div class="ml-1">
4809            <button @click="handleSummaryEdit" class="tw-block tw-text-[var(--button-secondary-color)] tw-underline tw-text-xs">Edit</button>
4810        </div>
4811    </div>
4812                    </div>
4813        <div class="form__body tw-h-full tw-text-theme-color">
4814            <form
4815  @submit.prevent="nextStep"
4816  x-show="isCurrentStep"
4817  data-step=1
4818  data-name="cart"
4819  data-title="Your Basket"
4820  :data-current-step="isCurrentStep"
4821  class="tw-h-full"
4822  
4823>
4824  <div class="cart__form">    
4825    <input type="hidden" name="_token" value="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_gpqt33T8VCI2VLef_wrap"  style="display: none" aria-hidden="true">
4826        <input id="voight-kampff_gpqt33T8VCI2VLef"
4827               name="voight-kampff_gpqt33T8VCI2VLef"
4828               type="text"
4829               value=""
4830                              autocomplete="nope"
4831               tabindex="-1">
4832        <input name="valid_from"
4833               type="text"
4834               value="eyJpdiI6IkwvYVJyNDROWWdxaVRDVHRvUndPUnc9PSIsInZhbHVlIjoiL0JObmZLL2I4K0hlK0VuckwzUUNVdz09IiwibWFjIjoiMzE0ZDRkZDExNzNmYTJlZTBmOGE0YjlhNGZkYjhlN2M3NjNiOGVmMzAzMmI5MjMzODE2YzU4MGNiYTVmYzk4NiIsInRhZyI6IiJ9"
4835                              autocomplete="off"
4836               tabindex="-1">
4837    </div>
4838                            <div class="tw-flex tw-flex-col tw-flex-1 tw-flow-root tw-mb-12">
4839                          
4840                          <ul class="tw-divide-y tw-divide-gray-200 tw-overflow-y-auto">
4841                            <template x-for="(item, index) in cartItems" :key="index">
4842                              <li 
4843    x-data="CartItem"
4844    x-load
4845    x-cloak
4846    class="tw-gap-x-4 tw-flex tw-p-6"
4847    :data-product-id="item.id"
4848    :data-product-amount="item.amount"
4849    :data-product-sku="item.sku" 
4850    :data-product-uuid="item.uuid"
4851    :data-product-is-monthly="item.is_monthly"
4852    :data-product-is-yearly="item.is_yearly"
4853    :data-product-quantity="item.quantity"
4854    :data-product-price="item.price"
4855    :data-product-type="item.type"
4856    :data-product-is-matched="item.is_matched_product"
4857    :data-product-match-amount="item.match_amount"
4858>
4859
4860    <div class="tw-size-24 tw-shrink-0 tw-overflow-hidden tw-rounded-md tw-border tw-border-gray-200 max-[375px]:tw-size-[72px]">
4861        <img :src="item.image" :alt="item.title" class="tw-size-full tw-object-cover">
4862    </div>
4863
4864    <div class="tw-flex tw-flex-1 tw-flex-col">
4865        <div>
4866        <div class="tw-gap-x-6 tw-flex tw-justify-between tw-text-base tw-font-medium tw-text-gray-900">
4867            <div>
4868
4869                
4870                
4871
4872                <div class="tw-gap-x-2 tw-flex tw-items-center">
4873                    <a :href="item.link" x-text="item.title" class="tw-font-bold tw-text-lg tw-uppercase"></a>
4874                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-active-blue tw-flex-shrink-0 tw-text-base"></span>                </div>
4875                <div>
4876                    <span x-text="frequencyText" class="tw-text-sm tw-text-soil-brown"></span>
4877
4878                    <template x-if="showType">
4879                        <span>
4880                            <span>-</span>
4881                            <span x-text="typeText" class="tw-text-sm tw-text-soil-brown"></span>
4882                        </span>
4883                    </template>
4884
4885                    <template x-if="showQuantity">
4886                        <div @counterchange.window="updateQuantity" class="tw-mt-1 tw-text-xs">
4887                            Quantity: <span x-text="productQuantity"></span>
4888                        </div>
4889                    </template>
4890                </div>
4891                <div class="tw-mt-2">
4892                    <template x-if="isDonationProduct">
4893                        <div>
4894                            <span x-text="amountText"></span><abbr class="tw-no-underline" x-show="showPriceAbbreviation" x-bind:title="priceAbbreviationTitle" x-text="priceAbbreviationText"></abbr>
4895                        </div>
4896                    </template>
4897                    <template x-if="isNotDonationProduct">
4898                        <div>
4899                            <span x-text="priceText"></span><abbr class="tw-no-underline" x-show="showPriceAbbreviation" x-bind:title="priceAbbreviationTitle" x-text="priceAbbreviationText"></abbr>
4900                        </div>
4901                    </template>
4902                </div>
4903            </div>
4904            <div>
4905                <div x-show="showEditOptions" x-cloak>
4906                    <template x-if="isDonationProduct">
4907                        <div class="tw-flex">
4908                            <input type="number" name="amount" class="tw-border tw-border-inactive-gray-light tw-gap-[0.7rem] tw-max-w-[110px] tw-py-[0.3rem] tw-px-[0.7rem] tw-w-full" :value="item.amount" @change="updateAmount" step="0.01" min="10">
4909                        </div>
4910                    </template>
4911                    <template x-if="isNotDonationProduct">
4912                        <div 
4913                            x-data="Counter" 
4914                            x-load="visible"
4915                            :data-target="item.sku"
4916                            class="tw-flex tw-gap-x-2"
4917                        >
4918                            <template x-if="quantityIsEqualToOne">
4919                                <button 
4920                                    type="button" 
4921                                    class="tw-font-medium tw-text-indigo-600 hover:tw-text-indigo-500"
4922                                    aria-label="Remove item."
4923                                    @click="removeItem"
4924                                >
4925                                    <span aria-hidden="true" class="tw-icon sprite-trash-mask tw-bg-active-blue tw-flex-shrink-0 tw-text-base"></span>                                </button>
4926                            </template>
4927                            <template x-if="quantityIsGreaterThanOne">
4928                                <button aria-label="Decrease quantity" type="button" @click="decreaseValue">
4929                                    <span aria-hidden="true" class="tw-icon sprite-minus-mask tw-bg-active-blue"></span>                                </button>
4930                            </template>
4931                            <input x-ref="input" type="number" class="tw-w-full" min="1" :value="item.quantity" name="quantity" @change="handleInputChange">
4932                            <button aria-label="Increase quantity" type="button" @click="increaseValue">
4933                                <span aria-hidden="true" class="tw-icon sprite-plus-mask tw-bg-active-blue"></span>                            </button>
4934                        </div>
4935                    </template>
4936                </div>
4937                <div class="tw-flex tw-flex-1 tw-gap-x-6 tw-items-center tw-justify-end tw-text-sm">
4938                    <div class="tw-flex">
4939                        <button 
4940                        type="button" 
4941                        class="link__inline tw-text-grand-blue tw-text-xs tw-tracking-[1px] tw-uppercase"
4942                        @click="editItem"
4943                        >Edit</button>
4944                    </div>
4945                    <div class="tw-flex" x-show="showRemoveButton">
4946                        <button 
4947                        type="button" 
4948                        class="tw-font-medium tw-text-indigo-600 hover:tw-text-indigo-500"
4949                        aria-label="Remove item."
4950                        @click="removeItem"
4951                        >
4952                            <span aria-hidden="true" class="tw-icon sprite-trash-mask tw-bg-active-blue tw-flex-shrink-0 tw-text-base"></span>                        </button>
4953                    </div>
4954                </div>
4955            </div>
4956        </div>
4957        </div>
4958
4959    </div>
4960</li>                            </template>
4961                          </ul>
4962                          
4963                          <div x-show="showSuggestedProducts" class="tw-px-6 tw-py-[30px]">
4964                            <hr class="tw-border-t tw-border-t-[3px] tw-border-t-rich-orange tw-m-auto tw-max-w-[120px]">
4965                            <div class="tw-text-h5 tw-mt-4 tw-text-center">Typically donated with <span x-text="currentSuggestedProduct"></span></div>
4966                            <ul class="tw-overflow-x-hidden tw-overflow-y-auto">
4967                              <template x-for="item in suggestedProducts">
4968                                <li 
4969                                  x-data="SuggestedProduct" 
4970                                  x-load 
4971                                  x-bind:data-product-type="item.type"
4972                                  class="tw-gap-4 tw-flex tw-flex-wrap tw-p-3 first-of-type:tw-mt-4 last-of-type:tw-mb-4"
4973                                >
4974                                  <figure class="tw-flex tw-flex-basis-auto tw-flex-grow-0 tw-flex-shrink-0 tw-size-[72px]">
4975                                    <img class="tw-object-cover" x-bind:src="item.image.url" x-bind:alt="item.image.alt">
4976                                  </figure>
4977                                  <div class="tw-gap-y-3 tw-flex tw-flex-col tw-flex-1">
4978                                    <a :href="item.link" x-text="item.title" class="tw-font-bold tw-text-sm"></a>
4979                                    <form @submit.prevent="addSuggestedProductToBasket">
4980                                      <button class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-6 tw-py-2 tw-text-sm tw-flex tw-gap-x-2 tw-items-center" type="submit" x-bind:disabled="productAdded">
4981                <span x-text="buttonText"></span>
4982                                        <template x-if="isProductNotAdded">
4983                                          <span aria-hidden="true" class="tw-icon sprite-expand-mask tw-bg-active-blue tw-flex-shrink-0"></span>                                        </template>
4984                                        <template x-if="isProductAdded">
4985                                          <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-flex-shrink-0"></span>                                        </template>
4986            </button>
4987                                      
4988                                      <input type="hidden" name="amount" x-bind:value="item.amount">
4989                                      <input type="hidden" name="frequency" value="one-time">
4990                                      <input type="hidden" name="image" x-bind:value="item.image.url">
4991                                      <input type="hidden" name="is_monthly" value="0">
4992                                      <input type="hidden" name="is_yearly" value="0">
4993                                      <input type="hidden" name="link" x-bind:value="item.link">
4994                                      <input type="hidden" name="quantity" value="1">
4995                                      <input type="hidden" name="price" x-bind:value="item.price">
4996                                      <input type="hidden" name="sku" x-bind:value="item.sku">
4997                                      <input type="hidden" name="suggested_products" value="">
4998                                      <input type="hidden" name="title" x-bind:value="item.title">
4999                                      <input type="hidden" name="type" x-bind:value="item.type">
5000                                      <input type="hidden" name="uuid" x-bind:value="item.uuid">
5001                                      <input type="hidden" name="is_matched_product" x-bind:value="item.is_matched_product">
5002                                      <input type="hidden" name="match_amount" x-bind:value="item.match_amount">
5003                                    </form>
5004                                  </div>
5005                                  <div class="tw-ml-auto">
5006                                      <template x-if="isDonationProduct">
5007                                        <span x-text="item.amountText"></span>
5008                                      </template>
5009    
5010                                      <template x-if="isNotDonationProduct">
5011                                        <span x-text="item.priceText"></span>
5012                                      </template>
5013                                  </div>
5014                                </li>
5015                              </template>
5016                            </ul>
5017                          </div>
5018                        </div>
5019                      <input type="hidden" name="amount" :value="cartTotalAmount">
5020                      <input type="hidden" name="products" :value="productsJSON">
5021                      <input type="hidden" name="banner_id" value="">
5022                      <input type="hidden" name="msource" value="">
5023<input type="hidden" name="isource" value="">
5024<input type="hidden" name="utm_campaign" value="">
5025<input type="hidden" name="utm_source" value="">
5026<input type="hidden" name="utm_medium" value="">
5027<input type="hidden" name="utm_term" value="">
5028<input type="hidden" name="utm_content" value="">
5029                      <input type="hidden" name="lr_id" value="">
5030                      <template x-if="isOnetime">
5031                        <input type="hidden" name="store_id" value="11">
5032                      </template>
5033                      <template x-if="isMonthly">
5034                        <input type="hidden" name="store_id" value="17">
5035                      </template>
5036                      <template x-if="isYearly">
5037                        <input type="hidden" name="store_id" value="19">
5038                      </template>
5039          <div class="cart__footer">
5040                        <template x-if="hasGiftCard">
5041                          <div class="tw-bg-rich-orange tw-text-clarity-white tw-text-center tw-p-3 tw-m-auto tw-tracking-wide">
5042                            <h4 class="tw-text-sm">
5043                              You have a Gift Card worth <span x-text="$store.cart.getGiftCardTotal"></span> activated.
5044                            </h4>
5045                            <p class="tw-text-xs tw-pt-2">
5046                              * Cannot be applied to recurring gifts or gift cards
5047                            </p>
5048                          </div>
5049                        </template>
5050                        <template x-if="isCartItemsMatched">
5051                          <div role="alert" class="banner__link">
5052    Your donation is matched
5053  </div>
5054                        </template>
5055                        <div class="cart__footer--total">
5056                          <div class="tw-flex tw-justify-between tw-text-lg tw-text-gray-900">
5057  <p class="tw-uppercase">Subtotal:</p>
5058  <p class="tw-font-bold" x-text="subtotalText"></p>
5059</div>
5060<template x-if="hasGiftCard">
5061  <div>
5062    <div class="tw-flex tw-justify-between tw-text-sm tw-text-gray-900 tw-uppercase">
5063      <span>Gift Card Applied:</span>
5064      <span x-text="giftCardAppliedText"></span>
5065    </div>
5066    <div class="tw-border-t tw-border-solid tw-border-disabled-grey tw-flex tw-justify-between tw-mt-3 tw-pt-3 tw-text-lg tw-text-gray-900 tw-uppercase">
5067      <span>Total:</span>
5068      <span class="tw-font-bold" x-text="totalText"></span>
5069    </div>
5070  </div>
5071</template>                          <div class="theme--cultivate-green wysiwyg tw-bg-cultivate-green tw-mt-4 tw-px-6 tw-py-5" x-show="showYearlyUpsell">
5072  <div class="tw-flex tw-gap-x-2 tw-text-h5">
5073    <div>
5074      <span aria-hidden="true" class="tw-icon sprite-annual-contribution-2 !tw-w-12 !tw-h-full"></span>    </div>
5075    <div>
5076      <span class="tw-text-h6 tw-text-base">Maximize your impact</span>
5077      <span class="tw-text-xl"><em>with an annual contribution.</em></span>
5078    </div>
5079  </div>
5080  <div class="tw-mt-4">
5081    <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
5082    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" data-frequency="yearly" id="is-yearly-6abe1b4646bf1" name="is_yearly" x-on:change="toggleYearlyUpsell">
5083    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-size-4">
5084        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
5085    <label for="is-yearly-6abe1b4646bf1" class="tw-ml-2 tw-text-sm">
5086        Make this an annual contribution
5087    </label>
5088    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="is-yearly-6abe1b4646bf1--error" x-text="errorText"></div>
5089</div></div></div>                          <div class="tw-mt-6">
5090                            <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-[30px] tw-w-full" @click="beginCheckout" type="submit">
5091                <span>Proceed To Checkout</span>
5092                    <span class="loader"></span>
5093            </button>
5094                          </div>
5095                          <div class="tw-text-center">
5096                            <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-[15px] tw-text-center tw-uppercase" @click="closeCart" @keydown.enter="closeCart" @keydown.space="closeCart" tabindex="0" type="button" role="button" target=_self>
5097        Keep Browsing
5098             </a>                          </div>
5099                        </div>
5100                      </div>
5101      </div>
5102</form>
5103                  <form
5104  @submit.prevent="nextStep"
5105  x-show="isCurrentStep"
5106  data-step=2
5107  data-name="payment-options"
5108  data-title="Choose Your Payment Details"
5109  :data-current-step="isCurrentStep"
5110  class="tw-h-full"
5111  
5112>
5113  <div class="cart__form">    
5114    <div class="tw-flex tw-flex-col tw-flex-1 tw-flow-root tw-mb-12 tw-p-6">
5115                      <div class="form__processing-checkbox">
5116    <div class="tw-flex tw-gap-1 tw-items-center">
5117        <div class="tw-relative">
5118            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
5119    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" id="processingFeeToggle-6abe1b4646635" x-on:change="toggleProcessingFee">
5120    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-size-4">
5121        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
5122    <label for="processingFeeToggle-6abe1b4646635" class="tw-ml-2 tw-text-xs">
5123        <template x-if="isOnetime">
5124                    <span>
5125                        Contribute <span x-text="processingFeeDollarAmount"></span> to cover your transaction costs.
5126                    </span>
5127                </template>
5128                <template x-if="isMonthly">
5129                    <span>
5130                        Contribute <span x-text="processingFeeDollarAmount"></span> each month to cover your transaction costs.
5131                    </span>
5132                </template>
5133                <template x-if="isYearly">
5134                    <span>
5135                        Contribute <span x-text="processingFeeDollarAmount"></span> each year to cover your transaction costs.
5136                    </span>
5137                </template>
5138    </label>
5139    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="processingFeeToggle-6abe1b4646635--error" x-text="errorText"></div>
5140</div>        </div>
5141        <span class="tw-relative" x-data="Tooltip" x-load x-on:click.outside="handleOutsideClick">
5142  <button
5143    aria-label="Info about processing fee." 
5144    type="button"
5145    class="tw-flex"
5146    x-on:mouseenter="showTooltip"
5147    x-on:mouseleave="hideTooltip"
5148    x-on:click="toggleTooltip"
5149    x-ref="tooltip-button"
5150  >
5151    <span aria-hidden="true" class="tw-icon sprite-question-mask tw-bg-black text-base"></span>  </button>
5152  <p class="tooltip tw-absolute tw-bg-clarity-white tw-text-black tw-left-1/2 tw-p-4 tw-shadow-xl tw-text-center tw-text-xs -tw-top-5 tw-transform -tw-translate-x-1/2 -tw-translate-y-full tw-w-48 tw-z-10 -tw-translate-x-3/4" x-cloak x-show="isTooltipActive"
5153          x-transition:enter="tw-transition tw-ease-in-out tw-duration-300"
5154          x-transition:enter-start="tw-opacity-0"
5155          x-transition:enter-end="tw-opacity-100"
5156          x-transition:leave="tw-transition tw-ease-in-out tw-duration-300"
5157          x-transition:leave-start="tw-opacity-100"
5158          x-transition:leave-end="tw-opacity-0"
5159      >
5160    <template x-if="isOnetime">
5161                <span>
5162                    Covering the transaction fee helps offset processing and administrative fees that we incur through taking payments online.
5163                </span>
5164            </template>
5165            <template x-if="isMonthly">
5166                <span>
5167                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
5168                </span>
5169            </template>
5170            <template x-if="isYearly">
5171                <span>
5172                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
5173                </span>
5174            </template>
5175  </p>
5176</span>
5177        <template x-if="showProcessingFee">
5178            <input type="hidden" name="processingFee" :value="processingFee">
5179        </template>
5180        <input type="hidden" name="coverProcessingFee" :value="hasProcessingFee" value="0">
5181    </div>
5182</div>
5183                      <hr class="tw-border-t tw-border-t-soil-brown tw-mt-8" />
5184                      <div x-show="isRecurring" class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" aria-hidden="true">
5185    <div class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</div>
5186</div>
5187
5188<fieldset class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" x-show="isOnetime">
5189    <legend class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</legend>
5190    
5191        
5192        
5193                            <div 
5194                @click="submitForm"
5195                data-payment-method="apple-pay"
5196                class="apple-pay-button apple-pay-button-black tw-cursor-pointer tw-rounded-none tw-h-[50px] tw-w-full"
5197                hidden
5198            >
5199                
5200                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
5201                    <input type="hidden" x-ref="paymentRef" value="apple-pay">
5202                </div>
5203            </div>
5204            
5205                    <div>
5206                <button 
5207                    @click="submitForm"    
5208                    class="tw-bg-black tw-min-h-[50px] tw-w-full" 
5209                    aria-label="Google Pay" 
5210                    type="button"
5211                    data-payment-method="google-pay"
5212                >
5213                    <span aria-hidden="true" class="tw-icon sprite-google-pay-mark tw-text-[50px]"></span>                </button>
5214                
5215                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
5216                    <input type="hidden" x-ref="paymentRef" value="google-pay">
5217                </div>
5218            </div>
5219        
5220        
5221                    
5222        
5223        
5224                    <button 
5225                @click="submitForm"   
5226                class="venmo-button tw-hidden tw-h-[50px] tw-w-full tw-bg-[#008CFF]"
5227                type="button"
5228                data-payment-method="venmo"
5229            >
5230                <div class="tw-h-[50px] tw-pb-0 tw-mb-0 tw-overflow-hidden">
5231                    <div class="tw-h-[50px]">
5232                        <span aria-hidden="true" class="tw-icon sprite-venmo-white tw-text-[120px] tw-object-top tw-overflow-hidden tw-height-[100px] tw--mt-8"></span>                    </div>
5233                </div>
5234            </button>
5235                    
5236        
5237                    <div
5238                class="paypal-button tw-min-h-[50px] tw-w-full" 
5239                type="button">
5240                
5241                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
5242                    <input type="hidden" x-ref="paymentRef" value="paypal">
5243                </div>
5244            </div>
5245        
5246                    </fieldset>                      <div class="tw-mt-6">
5247                        <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-6 tw-py-2 tw-text-sm tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-[30px] tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
5248                    <span aria-hidden="true" class="tw-icon sprite-credit-card-mask tw-bg-clarity-white"></span>                Credit Card
5249                    <span class="loader"></span>
5250            </button>
5251                        <div x-cloak x-show="isOnetime" x-data="ChariotConnect" x-load class="tw-mt-8 tw-text-center">
5252                          <input type="hidden" name="_token" value="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_zOcFQFBoitFPPXC1_wrap"  style="display: none" aria-hidden="true">
5253        <input id="voight-kampff_zOcFQFBoitFPPXC1"
5254               name="voight-kampff_zOcFQFBoitFPPXC1"
5255               type="text"
5256               value=""
5257                              autocomplete="nope"
5258               tabindex="-1">
5259        <input name="valid_from"
5260               type="text"
5261               value="eyJpdiI6IkxlUGhTb0xHenlmSU1JNk1LNXpCTEE9PSIsInZhbHVlIjoiSlFDb2dZcU53U0NsbWNTZGRybU1MZz09IiwibWFjIjoiMWQ3MmZjNWJhNDVkODczOGU1ODcxNmVhYWMyNmE2Yzk3NDQ2NTMxZTk1MDQwYWZlZTExYWIyYTAxMzcwMzQzMCIsInRhZyI6IiJ9"
5262                              autocomplete="off"
5263               tabindex="-1">
5264    </div>
5265                              <input type="hidden" name="msource" value="">
5266<input type="hidden" name="isource" value="">
5267<input type="hidden" name="utm_campaign" value="">
5268<input type="hidden" name="utm_source" value="">
5269<input type="hidden" name="utm_medium" value="">
5270<input type="hidden" name="utm_term" value="">
5271<input type="hidden" name="utm_content" value="">
5272                          <input type="hidden" name="referrer" value="/">
5273                          <div class="tw-font-bold tw-mb-3 tw-text-active-blue tw-uppercase -tw-mt-4">
5274                            Or Pay With
5275                          </div>
5276                          <chariot-connect id="chariot" cid="live_1047b4612a59ec3246545fcd4ec6bc3ead6f6dd007d5cccccb9b9325ccdb15d2"></chariot-connect>
5277                          
5278                          <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
5279                              <input type="hidden" x-ref="paymentRef" value="dafpay">
5280                          </div>
5281                          
5282                          <div x-data="DataLayer" x-load="visible" x-init="viewDafDonationFormStart">
5283                              <input type="hidden" x-ref="currentPageUrlRef" value="/">
5284                          </div>
5285                          <p class="tw-bg-light-robin-blue tw-text-grand-blue tw-mt-4 tw-py-4 tw-px-4 tw-rounded-md tw-text-xs tw-text-left">
5286                              <span class="tw-flex tw-items-start">
5287                                  <span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-active-blue tw-mt-0.5 tw-mr-1 tw-shrink-0"></span>                                  <span>
5288                                      DAFpay sends your <span x-text="totalText"></span> cart total as one Give Where Needed Most gift.
5289                                  </span>
5290                              </span>
5291                          </p>
5292                        </div>
5293                      </div>
5294                                           </div>
5295          <div class="cart__footer">
5296                            <template x-if="isCartItemsMatched">
5297                              <div role="alert" class="banner__link">
5298    Your donation is matched
5299  </div>
5300                            </template>
5301                          <div class="cart__footer--total">
5302                            <div class="tw-flex tw-justify-between tw-text-lg tw-text-gray-900">
5303  <p class="tw-uppercase">Subtotal:</p>
5304  <p class="tw-font-bold" x-text="subtotalText"></p>
5305</div>
5306<template x-if="hasGiftCard">
5307  <div>
5308    <div class="tw-flex tw-justify-between tw-text-sm tw-text-gray-900 tw-uppercase">
5309      <span>Gift Card Applied:</span>
5310      <span x-text="giftCardAppliedText"></span>
5311    </div>
5312    <div class="tw-border-t tw-border-solid tw-border-disabled-grey tw-flex tw-justify-between tw-mt-3 tw-pt-3 tw-text-lg tw-text-gray-900 tw-uppercase">
5313      <span>Total:</span>
5314      <span class="tw-font-bold" x-text="totalText"></span>
5315    </div>
5316  </div>
5317</template>                            <div class="tw-text-center">
5318                              <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-[15px] tw-text-center tw-uppercase" @click="closeCart" @keydown.enter="closeCart" @keydown.space="closeCart" tabindex="0" type="button" role="button" target=_self>
5319        Keep Browsing
5320             </a>                            </div>
5321                          </div>
5322                        </div>
5323      </div>
5324</form>
5325                  <form
5326  @submit.prevent="nextStep"
5327  x-show="isCurrentStep"
5328  data-step=3
5329  data-name="billing"
5330  data-title="Information"
5331  :data-current-step="isCurrentStep"
5332  class="tw-h-full"
5333  data-validate
5334>
5335  <div class="cart__form">    
5336    <div class="tw-flex tw-flex-col tw-flex-1 tw-flow-root tw-mb-12 tw-p-6">
5337                      <fieldset class="form__fieldset">
5338    <legend>Your Information</legend>
5339    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="firstName-6abe1b4646635">
5340  <label class="form__label" for="firstName-6abe1b4646635" 
5341  >
5342    First Name<span x-show="required">*</span>
5343  </label>
5344  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="given-name" id="firstName-6abe1b4646635" name="firstName" placeholder="" required="required" />
5345
5346<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5347  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="firstName-6abe1b4646635--error" x-text="errorText"></div>
5348  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="lastName-6abe1b4646635">
5349  <label class="form__label" for="lastName-6abe1b4646635" 
5350  >
5351    Last Name<span x-show="required">*</span>
5352  </label>
5353  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="family-name" id="lastName-6abe1b4646635" name="lastName" placeholder="" required="required" />
5354
5355<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
5355d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5356  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="lastName-6abe1b4646635--error" x-text="errorText"></div>
5357  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="email-6abe1b4646635">
5358  <label class="form__label" for="email-6abe1b4646635" 
5359  >
5360    Email<span x-show="required">*</span>
5361  </label>
5362  <input class="form__element" type="email" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="email" id="email-6abe1b4646635" name="email" placeholder="Ex: [email protected]" required="required" />
5363
5364<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5365  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="email-6abe1b4646635--error" x-text="errorText"></div>
5366  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="phone-6abe1b4646635">
5367  <label class="form__label" for="phone-6abe1b4646635" 
5368  >
5369    Phone (Optional)<span x-show="required">*</span>
5370  </label>
5371  <input class="form__element" type="phone" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="tel" id="phone-6abe1b4646635" name="phone" placeholder="Ex: 123-456-7890" />
5372
5373<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5374  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="phone-6abe1b4646635--error" x-text="errorText"></div>
5375  </div>    
5376    <label for="phone-opt-in-6abe1b4646635">
5377        <div class="tw-mt-4">
5378            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
5379    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" name="phone_opt_in" id="phone-opt-in-6abe1b4646635">
5380    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo tw-mb-auto tw-mt-1 tw-border-2 tw-size-4">
5381        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
5382    <label for="phone-opt-in-6abe1b4646635" class="tw-ml-2 tw-text-sm">
5383        <span class="wysiwyg">
5384                By providing your mobile phone number you agree that Heifer may contact you by phone and/or text message regarding Heifer news and updates. You can opt-out at any time. See 
5385                <a href="/privacy-policy" target="_blank" class="tw-relative tw-z-10">privacy policy</a>
5386                for details.        
5387            </span>
5388    </label>
5389    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="phone-opt-in-6abe1b4646635--error" x-text="errorText"></div>
5390</div>        </div>
5391    </label>
5392</fieldset>                      <fieldset class="form__fieldset">
5393    <legend x-show="isNotFree">Billing Information</legend>
5394    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address1-6abe1b4646635">
5395  <label class="form__label" for="address1-6abe1b4646635" 
5396  >
5397    Address 1<span x-show="required">*</span>
5398  </label>
5399  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="address1-6abe1b4646635" name="address1" placeholder="Address 1" required="required" />
5400
5401<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
5401d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5402  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address1-6abe1b4646635--error" x-text="errorText"></div>
5403  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address2-6abe1b4646635">
5404  <label class="form__label" for="address2-6abe1b4646635" 
5405  >
5406    Address 2<span x-show="required">*</span>
5407  </label>
5408  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="address2-6abe1b4646635" name="address2" placeholder="Address 2" />
5409
5410<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5411  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address2-6abe1b4646635--error" x-text="errorText"></div>
5412  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="city-6abe1b4646635">
5413  <label class="form__label" for="city-6abe1b4646635" 
5414  >
5415    City<span x-show="required">*</span>
5416  </label>
5417  <input class="form__element" type="city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="city-6abe1b4646635" name="city" placeholder="City" required="required" />
5418
5419<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5420  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="city-6abe1b4646635--error" x-text="errorText"></div>
5421  </div>    <div x-data="StateSelect" x-load data-target="state">
5422      <template x-if="showAU">
5423      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-AU-6abe1b4646635">
5424  <label class="form__label" for="state-AU-6abe1b4646635" 
5425  >
5426    State<span x-show="required">*</span>
5427  </label>
5428  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-AU-6abe1b4646635" name="state" required="required">
5429      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
5430      <option label="New South Wales" value="NSW" >New South Wales</option>
5431      <option label="Northern Territory" value="NT" >Northern Territory</option>
5432      <option label="Queensland" value="QLD" >Queensland</option>
5433      <option label="South Australia" value="SA" >South Australia</option>
5434      <option label="Tasmania" value="TAS" >Tasmania</option>
5435      <option label="Victoria" value="VIC" >Victoria</option>
5436      <option label="Western Australia" value="WA" >Western Australia</option>
5437  </select>
5438  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-AU-6abe1b4646635--error" x-text="errorText"></div>
5439  </div>    </template>
5440      <template x-if="showCA">
5441      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-CA-6abe1b4646635">
5442  <label class="form__label" for="state-CA-6abe1b4646635" 
5443  >
5444    Province<span x-show="required">*</span>
5445  </label>
5446  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-CA-6abe1b4646635" name="state" required="required">
5447      <option label="Alberta" value="AB" >Alberta</option>
5448      <option label="British Columbia" value="BC" >British Columbia</option>
5449      <option label="Manitoba" value="MB" >Manitoba</option>
5450      <option label="New Brunswick" value="NB" >New Brunswick</option>
5451      <option label="Newfoundland" value="NF" >Newfoundland</option>
5452      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
5453      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
5454      <option label="Nunavut" value="NU" >Nunavut</option>
5455      <option label="Ontario" value="ON" >Ontario</option>
5456      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
5457      <option label="Quebec" value="QC" >Quebec</option>
5458      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
5459      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
5460  </select>
5461  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-CA-6abe1b4646635--error" x-text="errorText"></div>
5462  </div>    </template>
5463      <template x-if="showUS">
5464      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-US-6abe1b4646635">
5465  <label class="form__label" for="state-US-6abe1b4646635" 
5466  >
5467    State<span x-show="required">*</span>
5468  </label>
5469  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-US-6abe1b4646635" name="state" required="required">
5470      <option label="Alabama" value="AL" >Alabama</option>
5471      <option label="Alaska" value="AK" >Alaska</option>
5472      <option label="Arizona" value="AZ" >Arizona</option>
5473      <option label="Arkansas" value="AR" >Arkansas</option>
5474      <option label="California" value="CA" >California</option>
5475      <option label="Colorado" value="CO" >Colorado</option>
5476      <option label="Connecticut" value="CT" >Connecticut</option>
5477      <option label="Delaware" value="DE" >Delaware</option>
5478      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
5479      <option label="Florida" value="FL" >Florida</option>
5480      <option label="Georgia" value="GA" >Georgia</option>
5481      <option label="Hawaii" value="HI" >Hawaii</option>
5482      <option label="Idaho" value="ID" >Idaho</option>
5483      <option label="Illinois" value="IL" >Illinois</option>
5484      <option label="Indiana" value="IN" >Indiana</option>
5485      <option label="Iowa" value="IA" >Iowa</option>
5486      <option label="Kansas" value="KS" >Kansas</option>
5487      <option label="Kentucky" value="KY" >Kentucky</option>
5488      <option label="Louisiana" value="LA" >Louisiana</option>
5489      <option label="Maine" value="ME" >Maine</option>
5490      <option label="Maryland" value="MD" >Maryland</option>
5491      <option label="Massachusetts" value="MA" >Massachusetts</option>
5492      <option label="Michigan" value="MI" >Michigan</option>
5493      <option label="Minnesota" value="MN" >Minnesota</option>
5494      <option label="Mississippi" value="MS" >Mississippi</option>
5495      <option label="Missouri" value="MO" >Missouri</option>
5496      <option label="Montana" value="MT" >Montana</option>
5497      <option label="Nebraska" value="NE" >Nebraska</option>
5498      <option label="Nevada" value="NV" >Nevada</option>
5499      <option label="New Hampshire" value="NH" >New Hampshire</option>
5500      <option label="New Jersey" value="NJ" >New Jersey</option>
5501      <option label="New Mexico" value="NM" >New Mexico</option>
5502      <option label="New York" value="NY" >New York</option>
5503      <option label="North Carolina" value="NC" >North Carolina</option>
5504      <option label="North Dakota" value="ND" >North Dakota</option>
5505      <option label="Ohio" value="OH" >Ohio</option>
5506      <option label="Oklahoma" value="OK" >Oklahoma</option>
5507      <option label="Oregon" value="OR" >Oregon</option>
5508      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
5509      <option label="Rhode Island" value="RI" >Rhode Island</option>
5510      <option label="South Carolina" value="SC" >South Carolina</option>
5511      <option label="South Dakota" value="SD" >South Dakota</option>
5512      <option label="Tennessee" value="TN" >Tennessee</option>
5513      <option label="Texas" value="TX" >Texas</option>
5514      <option label="Utah" value="UT" >Utah</option>
5515      <option label="Vermont" value="VT" >Vermont</option>
5516      <option label="Virginia" value="VA" >Virginia</option>
5517      <option label="Washington" value="WA" >Washington</option>
5518      <option label="West Virginia" value="WV" >West Virginia</option>
5519      <option label="Wisconsin" value="WI" >Wisconsin</option>
5520      <option label="Wyoming" value="WY" >Wyoming</option>
5521  </select>
5522  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-US-6abe1b4646635--error" x-text="errorText"></div>
5523  </div>    </template>
5524    <template x-if="showOther">
5525    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b4646635">
5526  <label class="form__label" for="state-other-US-6abe1b4646635" 
5527  >
5528    State/Province<span x-show="required">*</span>
5529  </label>
5530  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b4646635" name="state" placeholder="State/Province" selectedOption="" required="required" />
5531
5532<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
5532d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5533  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b4646635--error" x-text="errorText"></div>
5534  </div>  </template>
5535</div>
5536    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="zipcode-6abe1b4646635">
5537  <label class="form__label" for="zipcode-6abe1b4646635" 
5538  >
5539    Zip<span x-show="required">*</span>
5540  </label>
5541  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="zipcode-6abe1b4646635" name="zipcode" autocomplete="postal-code" autocorrect="off" required="required" />
5542
5543<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5544  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="zipcode-6abe1b4646635--error" x-text="errorText"></div>
5545  </div>    <div x-data="CountrySelect" x-load data-trigger="state">
5546    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="country-6abe1b4646635">
5547  <label class="form__label" for="country-6abe1b4646635" 
5548  >
5549    Country<span x-show="required">*</span>
5550  </label>
5551  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="country-6abe1b4646635" name="country" required="required">
5552      <option label="United States" value="US" >United States</option>
5553      <option label="Afghanistan" value="AF" >Afghanistan</option>
5554      <option label="Åland Islands" value="AX" >Åland Islands</option>
5555      <option label="Albania" value="AL" >Albania</option>
5556      <option label="Algeria" value="DZ" >Algeria</option>
5557      <option label="American Samoa" value="AS" >American Samoa</option>
5558      <option label="Andorra" value="AD" >Andorra</option>
5559      <option label="Angola" value="AO" >Angola</option>
5560      <option label="Anguilla" value="AI" >Anguilla</option>
5561      <option label="Antarctica" value="AQ" >Antarctica</option>
5562      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
5563      <option label="Argentina" value="AR" >Argentina</option>
5564      <option label="Armenia" value="AM" >Armenia</option>
5565      <option label="Aruba" value="AW" >Aruba</option>
5566      <option label="Australia" value="AU" >Australia</option>
5567      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
5568      <option label="Bahamas" value="BS" >Bahamas</option>
5569      <option label="Bahrain" value="BH" >Bahrain</option>
5570      <option label="Bangladesh" value="BD" >Bangladesh</option>
5571      <option label="Barbados" value="BB" >Barbados</option>
5572      <option label="Belarus" value="BY" >Belarus</option>
5573      <option label="Belize" value="BZ" >Belize</option>
5574      <option label="Benin" value="BJ" >Benin</option>
5575      <option label="Bermuda" value="BM" >Bermuda</option>
5576      <option label="Bhutan" value="BT" >Bhutan</option>
5577      <option label="Bolivia" value="BO" >Bolivia</option>
5578      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
5579      <option label="Botswana" value="BW" >Botswana</option>
5580      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
5581      <option label="Brazil" value="BR" >Brazil</option>
5582      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
5583      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
5584      <option label="Brunei" value="BN" >Brunei</option>
5585      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
5586      <option label="Burundi" value="BI" >Burundi</option>
5587      <option label="Cambodia" value="KH" >Cambodia</option>
5588      <option label="Cameroon" value="CM" >Cameroon</option>
5589      <option label="Canada" value="CA" >Canada</option>
5590      <option label="Cape Verde" value="CV" >Cape Verde</option>
5591      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
5592      <option label="Central African Republic" value="CF" >Central African Republic</option>
5593      <option label="Chad" value="TD" >Chad</option>
5594      <option label="Chile" value="CL" >Chile</option>
5595      <option label="Christmas Island" value="CX" >Christmas Island</option>
5596      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
5597      <option label="Colombia" value="CO" >Colombia</option>
5598      <option label="Comoros" value="KM" >Comoros</option>
5599      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
5600      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
5601      <option label="Cook Islands" value="CK" >Cook Islands</option>
5602      <option label="Costa Rica" value="CR" >Costa Rica</option>
5603      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
5604      <option label="Djibouti" value="DJ" >Djibouti</option>
5605      <option label="Dominica" value="DM" >Dominica</option>
5606      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
5607      <option label="Ecuador" value="EC" >Ecuador</option>
5608      <option label="Egypt" value="EG" >Egypt</option>
5609      <option label="El Salvador" value="SV" >El Salvador</option>
5610      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
5611      <option label="Eritrea" value="ER" >Eritrea</option>
5612      <option label="Ethiopia" value="ET" >Ethiopia</option>
5613      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
5614      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
5615      <option label="Fiji" value="FJ" >Fiji</option>
5616      <option label="French Guiana" value="GF" >French Guiana</option>
5617      <option label="French Polynesia" value="PF" >French Polynesia</option>
5618      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
5619      <option label="Gabon" value="GA" >Gabon</option>
5620      <option label="Gambia" value="GM" >Gambia</option>
5621      <option label="Georgia" value="GE" >Georgia</option>
5622      <option label="Ghana" value="GH" >Ghana</option>
5623      <option label="Gibraltar" value="GI" >Gibraltar</option>
5624      <option label="Greenland" value="GL" >Greenland</option>
5625      <option label="Grenada" value="GD" >Grenada</option>
5626      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
5627      <option label="Guam" value="GU" >Guam</option>
5628      <option label="Guatemala" value="GT" >Guatemala</option>
5629      <option label="Guernsey" value="GG" >Guernsey</option>
5630      <option label="Guinea" value="GN" >Guinea</option>
5631      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
5632      <option label="Guyana" value="GY" >Guyana</option>
5633      <option label="Haiti" value="HT" >Haiti</option>
5634      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
5635      <option label="Honduras" value="HN" >Honduras</option>
5636      <option label="India" value="IN" >India</option>
5637      <option label="Indonesia" value="ID" >Indonesia</option>
5638      <option label="Iraq" value="IQ" >Iraq</option>
5639      <option label="Isle of Man" value="IM" >Isle of Man</option>
5640      <option label="Israel" value="IL" >Israel</option>
5641      <option label="Jamaica" value="JM" >Jamaica</option>
5642      <option label="Japan" value="JP" >Japan</option>
5643      <option label="Jersey" value="JE" >Jersey</option>
5644      <option label="Jordan" value="JO" >Jordan</option>
5645      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
5646      <option label="Kenya" value="KE" >Kenya</option>
5647      <option label="Kiribati" value="KI" >Kiribati</option>
5648      <option label="Kuwait" value="KW" >Kuwait</option>
5649      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
5650      <option label="Laos" value="LA" >Laos</option>
5651      <option label="Lebanon" value="LB" >Lebanon</option>
5652      <option label="Lesotho" value="LS" >Lesotho</option>
5653      <option label="Liberia" value="LR" >Liberia</option>
5654      <option label="Libya" value="LY" >Libya</option>
5655      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
5656      <option label="Macedonia" value="MK" >Macedonia</option>
5657      <option label="Madagascar" value="MG" >Madagascar</option>
5658      <option label="Malawi" value="MW" >Malawi</option>
5659      <option label="Malaysia" value="MY" >Malaysia</option>
5660      <option label="Maldives" value="MV" >Maldives</option>
5661      <option label="Mali" value="ML" >Mali</option>
5662      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
5663      <option label="Martinique" value="MQ" >Martinique</option>
5664      <option label="Mauritania" value="MR" >Mauritania</option>
5665      <option label="Mauritius" value="MU" >Mauritius</option>
5666      <option label="Mayotte" value="YT" >Mayotte</option>
5667      <option label="Mexico" value="MX" >Mexico</option>
5668      <option label="Micronesia" value="FM" >Micronesia</option>
5669      <option label="Moldova" value="MD" >Moldova</option>
5670      <option label="Monaco" value="MC" >Monaco</option>
5671      <option label="Mongolia" value="MN" >Mongolia</option>
5672      <option label="Montenegro" value="ME" >Montenegro</option>
5673      <option label="Montserrat" value="MS" >Montserrat</option>
5674      <option label="Morocco" value="MA" >Morocco</option>
5675      <option label="Mozambique" value="MZ" >Mozambique</option>
5676      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
5677      <option label="Namibia" value="NA" >Namibia</option>
5678      <option label="Nauru" value="NR" >Nauru</option>
5679      <option label="Nepal" value="NP" >Nepal</option>
5680      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
5681      <option label="New Caledonia" value="NC" >New Caledonia</option>
5682      <option label="New Zealand" value="NZ" >New Zealand</option>
5683      <option label="Nicaragua" value="NI" >Nicaragua</option>
5684      <option label="Niger" value="NE" >Niger</option>
5685      <option label="Nigeria" value="NG" >Nigeria</option>
5686      <option label="Niue" value="NU" >Niue</option>
5687      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
5688      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
5689      <option label="Oman" value="OM" >Oman</option>
5690      <option label="Pakistan" value="PK" >Pakistan</option>
5691      <option label="Palau" value="PW" >Palau</option>
5692      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
5693      <option label="Panama" value="PA" >Panama</option>
5694      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
5695      <option label="Paraguay" value="PY" >Paraguay</option>
5696      <option label="Peru" value="PE" >Peru</option>
5697      <option label="Philippines" value="PH" >Philippines</option>
5698      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
5699      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
5700      <option label="Qatar" value="QA" >Qatar</option>
5701      <option label="Réunion" value="RE" >Réunion</option>
5702      <option label="Rwanda" value="RW" >Rwanda</option>
5703      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
5704      <option label="Saint Helena" value="SH" >Saint Helena</option>
5705      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
5706      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
5707      <option label="Saint Martin" value="MF" >Saint Martin</option>
5708      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
5709      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
5710      <option label="Samoa" value="WS" >Samoa</option>
5711      <option label="San Marino" value="SM" >San Marino</option>
5712      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
5713      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
5714      <option label="Senegal" value="SN" >Senegal</option>
5715      <option label="Serbia" value="RS" >Serbia</option>
5716      <option label="Seychelles" value="SC" >Seychelles</option>
5717      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
5718      <option label="Singapore" value="SG" >Singapore</option>
5719      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
5720      <option label="Somalia" value="SO" >Somalia</option>
5721      <option label="South Africa" value="ZA" >South Africa</option>
5722      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
5723      <option label="South Korea" value="KR" >South Korea</option>
5724      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
5725      <option label="Sudan" value="SD" >Sudan</option>
5726      <option label="Suriname" value="SR" >Suriname</option>
5727      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
5728      <option label="Swaziland" value="SZ" >Swaziland</option>
5729      <option label="Switzerland" value="CH" >Switzerland</option>
5730      <option label="Taiwan" value="TW" >Taiwan</option>
5731      <option label="Tajikistan" value="TJ" >Tajikistan</option>
5732      <option label="Tanzania" value="TZ" >Tanzania</option>
5733      <option label="Thailand" value="TH" >Thailand</option>
5734      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
5735      <option label="Togo" value="TG" >Togo</option>
5736      <option label="Tokelau" value="TK" >Tokelau</option>
5737      <option label="Tonga" value="TO" >Tonga</option>
5738      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
5739      <option label="Tunisia" value="TN" >Tunisia</option>
5740      <option label="Turkey" value="TR" >Turkey</option>
5741      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
5742      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
5743      <option label="Tuvalu" value="TV" >Tuvalu</option>
5744      <option label="Uganda" value="UG" >Uganda</option>
5745      <option label="Ukraine" value="UA" >Ukraine</option>
5746      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
5747      <option label="Uruguay" value="UY" >Uruguay</option>
5748      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
5749      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
5750      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
5751      <option label="Vanuatu" value="VU" >Vanuatu</option>
5752      <option label="Vatican City" value="VA" >Vatican City</option>
5753      <option label="Vietnam" value="VN" >Vietnam</option>
5754      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
5755      <option label="Western Sahara" value="EH" >Western Sahara</option>
5756      <option label="Yemen" value="YE" >Yemen</option>
5757      <option label="Zambia" value="ZM" >Zambia</option>
5758      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
5759  </select>
5760  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="country-6abe1b4646635--error" x-text="errorText"></div>
5761  </div></div>            
5762        <div x-data="DataLayer" x-load="visible" x-init="addShippingInfo">
5763            <input type="hidden" x-ref="productData" :value="productData">
5764        </div>  
5765    </fieldset>                      <div x-data="FormFieldsToggle" x-load>
5766    <fieldset class="tw-text-xs tw-mt-7">
5767        <legend class="tw-text-base">I am donating today:</legend>
5768        <div class="tw-gap-4 tw-grid tw-mt-3 sm:tw-grid-cols-2">
5769            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
5770    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="individual" name="buying_on_behalf" id="buying_on_behalf_individual-6abe1b4646635" checked="checked" @click="hideOnChecked" />
5771    <div aria-hidden class="tw-aspect-square tw-fl
5771ex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
5772    <label class="tw-ml-3" for="buying_on_behalf_individual-6abe1b4646635">
5773        As an individual
5774    </label>
5775    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_individual-6abe1b4646635--error" x-text="errorText"></div>
5776    </div>            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
5777    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="organization" name="buying_on_behalf" id="buying_on_behalf_organization-6abe1b4646635" @click="showOnChecked" />
5778    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
5779    <label class="tw-ml-3" for="buying_on_behalf_organization-6abe1b4646635">
5780        On behalf of a group or organization
5781    </label>
5782    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_organization-6abe1b4646635--error" x-text="errorText"></div>
5783    </div>        </div>
5784    </fieldset>
5785    <template x-if="active">
5786        <fieldset class="form__fieldset">
5787            <legend>Tell us about your group or organization</legend>
5788            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_name_6abe1b4646635">
5789  <label class="form__label" for="buying_on_behalf_name_6abe1b4646635" 
5790  >
5791    Organization Name<span x-show="required">*</span>
5792  </label>
5793  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_name_6abe1b4646635" name="buying_on_behalf_name" placeholder="Organization Name" required="required" />
5794
5795<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5796  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_name_6abe1b4646635--error" x-text="errorText"></div>
5797  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_type_6abe1b4646635">
5798  <label class="form__label" for="buying_on_behalf_type_6abe1b4646635" 
5799  >
5800    Select Organization Type<span x-show="required">*</span>
5801  </label>
5802  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_type_6abe1b4646635" name="buying_on_behalf_type">
5803      <option label="Select Organization Type" value="" selected>Select Organization Type</option>
5804      <option label="Civic Group" value="civic_group" >Civic Group</option>
5805      <option label="Congregation/Faith Group" value="congregation" >Congregation/Faith Group</option>
5806      <option label="Corporation" value="corporation" >Corporation</option>
5807      <option label="Family Group" value="family_group" >Family Group</option>
5808      <option label="Foundation" value="foundation" >Foundation</option>
5809      <option label="School" value="school" >School</option>
5810      <option label="Other" value="other" >Other</option>
5811  </select>
5812  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_type_6abe1b4646635--error" x-text="errorText"></div>
5813  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_1_6abe1b4646635">
5814  <label class="form__label" for="buying_on_behalf_address_1_6abe1b4646635" 
5815  >
5816    Organization Address<span x-show="required">*</span>
5817  </label>
5818  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="buying_on_behalf_address_1_6abe1b4646635" name="buying_on_behalf_address_1" placeholder="Address 1" required="required" />
5819
5820<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
5820d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5821  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_1_6abe1b4646635--error" x-text="errorText"></div>
5822  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_2_6abe1b4646635">
5823  <label class="form__label" for="buying_on_behalf_address_2_6abe1b4646635" 
5824  >
5825    Organization Address Line 2<span x-show="required">*</span>
5826  </label>
5827  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="buying_on_behalf_address_2_6abe1b4646635" name="buying_on_behalf_address_2" placeholder="Organization Address Line 2" />
5828
5829<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5830  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_2_6abe1b4646635--error" x-text="errorText"></div>
5831  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_city_6abe1b4646635">
5832  <label class="form__label" for="buying_on_behalf_city_6abe1b4646635" 
5833  >
5834    City<span x-show="required">*</span>
5835  </label>
5836  <input class="form__element" type="buying_on_behalf_city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="buying_on_behalf_city_6abe1b4646635" name="buying_on_behalf_city" placeholder="City" required="required" />
5837
5838<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5839  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_city_6abe1b4646635--error" x-text="errorText"></div>
5840  </div>            <div x-data="StateSelect" x-load data-target="buying_on_behalf_state">
5841      <template x-if="showAU">
5842      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-AU-6abe1b4646635">
5843  <label class="form__label" for="buying_on_behalf_state-AU-6abe1b4646635" 
5844  >
5845    State<span x-show="required">*</span>
5846  </label>
5847  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-AU-6abe1b4646635" name="buying_on_behalf_state" required="required">
5848      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
5849      <option label="New South Wales" value="NSW" >New South Wales</option>
5850      <option label="Northern Territory" value="NT" >Northern Territory</option>
5851      <option label="Queensland" value="QLD" >Queensland</option>
5852      <option label="South Australia" value="SA" >South Australia</option>
5853      <option label="Tasmania" value="TAS" >Tasmania</option>
5854      <option label="Victoria" value="VIC" >Victoria</option>
5855      <option label="Western Australia" value="WA" >Western Australia</option>
5856  </select>
5857  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-AU-6abe1b4646635--error" x-text="errorText"></div>
5858  </div>    </template>
5859      <template x-if="showCA">
5860      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-CA-6abe1b4646635">
5861  <label class="form__label" for="buying_on_behalf_state-CA-6abe1b4646635" 
5862  >
5863    Province<span x-show="required">*</span>
5864  </label>
5865  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-CA-6abe1b4646635" name="buying_on_behalf_state" required="required">
5866      <option label="Alberta" value="AB" >Alberta</option>
5867      <option label="British Columbia" value="BC" >British Columbia</option>
5868      <option label="Manitoba" value="MB" >Manitoba</option>
5869      <option label="New Brunswick" value="NB" >New Brunswick</option>
5870      <option label="Newfoundland" value="NF" >Newfoundland</option>
5871      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
5872      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
5873      <option label="Nunavut" value="NU" >Nunavut</option>
5874      <option label="Ontario" value="ON" >Ontario</option>
5875      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
5876      <option label="Quebec" value="QC" >Quebec</option>
5877      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
5878      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
5879  </select>
5880  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-CA-6abe1b4646635--error" x-text="errorText"></div>
5881  </div>    </template>
5882      <template x-if="showUS">
5883      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-US-6abe1b4646635">
5884  <label class="form__label" for="buying_on_behalf_state-US-6abe1b4646635" 
5885  >
5886    State<span x-show="required">*</span>
5887  </label>
5888  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-US-6abe1b4646635" name="buying_on_behalf_state" required="required">
5889      <option label="Alabama" value="AL" >Alabama</option>
5890      <option label="Alaska" value="AK" >Alaska</option>
5891      <option label="Arizona" value="AZ" >Arizona</option>
5892      <option label="Arkansas" value="AR" >Arkansas</option>
5893      <option label="California" value="CA" >California</option>
5894      <option label="Colorado" value="CO" >Colorado</option>
5895      <option label="Connecticut" value="CT" >Connecticut</option>
5896      <option label="Delaware" value="DE" >Delaware</option>
5897      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
5898      <option label="Florida" value="FL" >Florida</option>
5899      <option label="Georgia" value="GA" >Georgia</option>
5900      <option label="Hawaii" value="HI" >Hawaii</option>
5901      <option label="Idaho" value="ID" >Idaho</option>
5902      <option label="Illinois" value="IL" >Illinois</option>
5903      <option label="Indiana" value="IN" >Indiana</option>
5904      <option label="Iowa" value="IA" >Iowa</option>
5905      <option label="Kansas" value="KS" >Kansas</option>
5906      <option label="Kentucky" value="KY" >Kentucky</option>
5907      <option label="Louisiana" value="LA" >Louisiana</option>
5908      <option label="Maine" value="ME" >Maine</option>
5909      <option label="Maryland" value="MD" >Maryland</option>
5910      <option label="Massachusetts" value="MA" >Massachusetts</option>
5911      <option label="Michigan" value="MI" >Michigan</option>
5912      <option label="Minnesota" value="MN" >Minnesota</option>
5913      <option label="Mississippi" value="MS" >Mississippi</option>
5914      <option label="Missouri" value="MO" >Missouri</option>
5915      <option label="Montana" value="MT" >Montana</option>
5916      <option label="Nebraska" value="NE" >Nebraska</option>
5917      <option label="Nevada" value="NV" >Nevada</option>
5918      <option label="New Hampshire" value="NH" >New Hampshire</option>
5919      <option label="New Jersey" value="NJ" >New Jersey</option>
5920      <option label="New Mexico" value="NM" >New Mexico</option>
5921      <option label="New York" value="NY" >New York</option>
5922      <option label="North Carolina" value="NC" >North Carolina</option>
5923      <option label="North Dakota" value="ND" >North Dakota</option>
5924      <option label="Ohio" value="OH" >Ohio</option>
5925      <option label="Oklahoma" value="OK" >Oklahoma</option>
5926      <option label="Oregon" value="OR" >Oregon</option>
5927      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
5928      <option label="Rhode Island" value="RI" >Rhode Island</option>
5929      <option label="South Carolina" value="SC" >South Carolina</option>
5930      <option label="South Dakota" value="SD" >South Dakota</option>
5931      <option label="Tennessee" value="TN" >Tennessee</option>
5932      <option label="Texas" value="TX" >Texas</option>
5933      <option label="Utah" value="UT" >Utah</option>
5934      <option label="Vermont" value="VT" >Vermont</option>
5935      <option label="Virginia" value="VA" >Virginia</option>
5936      <option label="Washington" value="WA" >Washington</option>
5937      <option label="West Virginia" value="WV" >West Virginia</option>
5938      <option label="Wisconsin" value="WI" >Wisconsin</option>
5939      <option label="Wyoming" value="WY" >Wyoming</option>
5940  </select>
5941  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-US-6abe1b4646635--error" x-text="errorText"></div>
5942  </div>    </template>
5943    <template x-if="showOther">
5944    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b4646635">
5945  <label class="form__label" for="state-other-US-6abe1b4646635" 
5946  >
5947    State/Province<span x-show="required">*</span>
5948  </label>
5949  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b4646635" name="buying_on_behalf_state" placeholder="State/Province" selectedOption="" required="required" />
5950
5951<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
5951d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5952  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b4646635--error" x-text="errorText"></div>
5953  </div>  </template>
5954</div>
5955            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_zip_6abe1b4646635">
5956  <label class="form__label" for="buying_on_behalf_zip_6abe1b4646635" 
5957  >
5958    Zip<span x-show="required">*</span>
5959  </label>
5960  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_zip_6abe1b4646635" name="buying_on_behalf_zip" autocomplete="postal-code" autocorrect="off" required="required" />
5961
5962<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
5963  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_zip_6abe1b4646635--error" x-text="errorText"></div>
5964  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country_6abe1b4646635">
5965  <label class="form__label" for="buying_on_behalf_country_6abe1b4646635" 
5966  >
5967    Country<span x-show="required">*</span>
5968  </label>
5969  <div x-data="CountrySelect" x-load data-trigger="state">
5970    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country-6abe1b4646635">
5971  <label class="form__label" for="buying_on_behalf_country-6abe1b4646635" 
5972  >
5973    Country<span x-show="required">*</span>
5974  </label>
5975  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="buying_on_behalf_country-6abe1b4646635" name="buying_on_behalf_country" required="required">
5976      <option label="United States" value="US" >United States</option>
5977      <option label="Afghanistan" value="AF" >Afghanistan</option>
5978      <option label="Åland Islands" value="AX" >Åland Islands</option>
5979      <option label="Albania" value="AL" >Albania</option>
5980      <option label="Algeria" value="DZ" >Algeria</option>
5981      <option label="American Samoa" value="AS" >American Samoa</option>
5982      <option label="Andorra" value="AD" >Andorra</option>
5983      <option label="Angola" value="AO" >Angola</option>
5984      <option label="Anguilla" value="AI" >Anguilla</option>
5985      <option label="Antarctica" value="AQ" >Antarctica</option>
5986      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
5987      <option label="Argentina" value="AR" >Argentina</option>
5988      <option label="Armenia" value="AM" >Armenia</option>
5989      <option label="Aruba" value="AW" >Aruba</option>
5990      <option label="Australia" value="AU" >Australia</option>
5991      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
5992      <option label="Bahamas" value="BS" >Bahamas</option>
5993      <option label="Bahrain" value="BH" >Bahrain</option>
5994      <option label="Bangladesh" value="BD" >Bangladesh</option>
5995      <option label="Barbados" value="BB" >Barbados</option>
5996      <option label="Belarus" value="BY" >Belarus</option>
5997      <option label="Belize" value="BZ" >Belize</option>
5998      <option label="Benin" value="BJ" >Benin</option>
5999      <option label="Bermuda" value="BM" >Bermuda</option>
6000      <option label="Bhutan" value="BT" >Bhutan</option>
6001      <option label="Bolivia" value="BO" >Bolivia</option>
6002      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
6003      <option label="Botswana" value="BW" >Botswana</option>
6004      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
6005      <option label="Brazil" value="BR" >Brazil</option>
6006      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
6007      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
6008      <option label="Brunei" value="BN" >Brunei</option>
6009      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
6010      <option label="Burundi" value="BI" >Burundi</option>
6011      <option label="Cambodia" value="KH" >Cambodia</option>
6012      <option label="Cameroon" value="CM" >Cameroon</option>
6013      <option label="Canada" value="CA" >Canada</option>
6014      <option label="Cape Verde" value="CV" >Cape Verde</option>
6015      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
6016      <option label="Central African Republic" value="CF" >Central African Republic</option>
6017      <option label="Chad" value="TD" >Chad</option>
6018      <option label="Chile" value="CL" >Chile</option>
6019      <option label="Christmas Island" value="CX" >Christmas Island</option>
6020      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
6021      <option label="Colombia" value="CO" >Colombia</option>
6022      <option label="Comoros" value="KM" >Comoros</option>
6023      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
6024      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
6025      <option label="Cook Islands" value="CK" >Cook Islands</option>
6026      <option label="Costa Rica" value="CR" >Costa Rica</option>
6027      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
6028      <option label="Djibouti" value="DJ" >Djibouti</option>
6029      <option label="Dominica" value="DM" >Dominica</option>
6030      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
6031      <option label="Ecuador" value="EC" >Ecuador</option>
6032      <option label="Egypt" value="EG" >Egypt</option>
6033      <option label="El Salvador" value="SV" >El Salvador</option>
6034      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
6035      <option label="Eritrea" value="ER" >Eritrea</option>
6036      <option label="Ethiopia" value="ET" >Ethiopia</option>
6037      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
6038      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
6039      <option label="Fiji" value="FJ" >Fiji</option>
6040      <option label="French Guiana" value="GF" >French Guiana</option>
6041      <option label="French Polynesia" value="PF" >French Polynesia</option>
6042      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
6043      <option label="Gabon" value="GA" >Gabon</option>
6044      <option label="Gambia" value="GM" >Gambia</option>
6045      <option label="Georgia" value="GE" >Georgia</option>
6046      <option label="Ghana" value="GH" >Ghana</option>
6047      <option label="Gibraltar" value="GI" >Gibraltar</option>
6048      <option label="Greenland" value="GL" >Greenland</option>
6049      <option label="Grenada" value="GD" >Grenada</option>
6050      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
6051      <option label="Guam" value="GU" >Guam</option>
6052      <option label="Guatemala" value="GT" >Guatemala</option>
6053      <option label="Guernsey" value="GG" >Guernsey</option>
6054      <option label="Guinea" value="GN" >Guinea</option>
6055      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
6056      <option label="Guyana" value="GY" >Guyana</option>
6057      <option label="Haiti" value="HT" >Haiti</option>
6058      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
6059      <option label="Honduras" value="HN" >Honduras</option>
6060      <option label="India" value="IN" >India</option>
6061      <option label="Indonesia" value="ID" >Indonesia</option>
6062      <option label="Iraq" value="IQ" >Iraq</option>
6063      <option label="Isle of Man" value="IM" >Isle of Man</option>
6064      <option label="Israel" value="IL" >Israel</option>
6065      <option label="Jamaica" value="JM" >Jamaica</option>
6066      <option label="Japan" value="JP" >Japan</option>
6067      <option label="Jersey" value="JE" >Jersey</option>
6068      <option label="Jordan" value="JO" >Jordan</option>
6069      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
6070      <option label="Kenya" value="KE" >Kenya</option>
6071      <option label="Kiribati" value="KI" >Kiribati</option>
6072      <option label="Kuwait" value="KW" >Kuwait</option>
6073      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
6074      <option label="Laos" value="LA" >Laos</option>
6075      <option label="Lebanon" value="LB" >Lebanon</option>
6076      <option label="Lesotho" value="LS" >Lesotho</option>
6077      <option label="Liberia" value="LR" >Liberia</option>
6078      <option label="Libya" value="LY" >Libya</option>
6079      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
6080      <option label="Macedonia" value="MK" >Macedonia</option>
6081      <option label="Madagascar" value="MG" >Madagascar</option>
6082      <option label="Malawi" value="MW" >Malawi</option>
6083      <option label="Malaysia" value="MY" >Malaysia</option>
6084      <option label="Maldives" value="MV" >Maldives</option>
6085      <option label="Mali" value="ML" >Mali</option>
6086      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
6087      <option label="Martinique" value="MQ" >Martinique</option>
6088      <option label="Mauritania" value="MR" >Mauritania</option>
6089      <option label="Mauritius" value="MU" >Mauritius</option>
6090      <option label="Mayotte" value="YT" >Mayotte</option>
6091      <option label="Mexico" value="MX" >Mexico</option>
6092      <option label="Micronesia" value="FM" >Micronesia</option>
6093      <option label="Moldova" value="MD" >Moldova</option>
6094      <option label="Monaco" value="MC" >Monaco</option>
6095      <option label="Mongolia" value="MN" >Mongolia</option>
6096      <option label="Montenegro" value="ME" >Montenegro</option>
6097      <option label="Montserrat" value="MS" >Montserrat</option>
6098      <option label="Morocco" value="MA" >Morocco</option>
6099      <option label="Mozambique" value="MZ" >Mozambique</option>
6100      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
6101      <option label="Namibia" value="NA" >Namibia</option>
6102      <option label="Nauru" value="NR" >Nauru</option>
6103      <option label="Nepal" value="NP" >Nepal</option>
6104      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
6105      <option label="New Caledonia" value="NC" >New Caledonia</option>
6106      <option label="New Zealand" value="NZ" >New Zealand</option>
6107      <option label="Nicaragua" value="NI" >Nicaragua</option>
6108      <option label="Niger" value="NE" >Niger</option>
6109      <option label="Nigeria" value="NG" >Nigeria</option>
6110      <option label="Niue" value="NU" >Niue</option>
6111      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
6112      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
6113      <option label="Oman" value="OM" >Oman</option>
6114      <option label="Pakistan" value="PK" >Pakistan</option>
6115      <option label="Palau" value="PW" >Palau</option>
6116      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
6117      <option label="Panama" value="PA" >Panama</option>
6118      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
6119      <option label="Paraguay" value="PY" >Paraguay</option>
6120      <option label="Peru" value="PE" >Peru</option>
6121      <option label="Philippines" value="PH" >Philippines</option>
6122      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
6123      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
6124      <option label="Qatar" value="QA" >Qatar</option>
6125      <option label="Réunion" value="RE" >Réunion</option>
6126      <option label="Rwanda" value="RW" >Rwanda</option>
6127      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
6128      <option label="Saint Helena" value="SH" >Saint Helena</option>
6129      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
6130      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
6131      <option label="Saint Martin" value="MF" >Saint Martin</option>
6132      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
6133      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
6134      <option label="Samoa" value="WS" >Samoa</option>
6135      <option label="San Marino" value="SM" >San Marino</option>
6136      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
6137      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
6138      <option label="Senegal" value="SN" >Senegal</option>
6139      <option label="Serbia" value="RS" >Serbia</option>
6140      <option label="Seychelles" value="SC" >Seychelles</option>
6141      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
6142      <option label="Singapore" value="SG" >Singapore</option>
6143      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
6144      <option label="Somalia" value="SO" >Somalia</option>
6145      <option label="South Africa" value="ZA" >South Africa</option>
6146      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
6147      <option label="South Korea" value="KR" >South Korea</option>
6148      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
6149      <option label="Sudan" value="SD" >Sudan</option>
6150      <option label="Suriname" value="SR" >Suriname</option>
6151      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
6152      <option label="Swaziland" value="SZ" >Swaziland</option>
6153      <option label="Switzerland" value="CH" >Switzerland</option>
6154      <option label="Taiwan" value="TW" >Taiwan</option>
6155      <option label="Tajikistan" value="TJ" >Tajikistan</option>
6156      <option label="Tanzania" value="TZ" >Tanzania</option>
6157      <option label="Thailand" value="TH" >Thailand</option>
6158      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
6159      <option label="Togo" value="TG" >Togo</option>
6160      <option label="Tokelau" value="TK" >Tokelau</option>
6161      <option label="Tonga" value="TO" >Tonga</option>
6162      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
6163      <option label="Tunisia" value="TN" >Tunisia</option>
6164      <option label="Turkey" value="TR" >Turkey</option>
6165      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
6166      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
6167      <option label="Tuvalu" value="TV" >Tuvalu</option>
6168      <option label="Uganda" value="UG" >Uganda</option>
6169      <option label="Ukraine" value="UA" >Ukraine</option>
6170      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
6171      <option label="Uruguay" value="UY" >Uruguay</option>
6172      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
6173      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
6174      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
6175      <option label="Vanuatu" value="VU" >Vanuatu</option>
6176      <option label="Vatican City" value="VA" >Vatican City</option>
6177      <option label="Vietnam" value="VN" >Vietnam</option>
6178      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
6179      <option label="Western Sahara" value="EH" >Western Sahara</option>
6180      <option label="Yemen" value="YE" >Yemen</option>
6181      <option label="Zambia" value="ZM" >Zambia</option>
6182      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
6183  </select>
6184  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country-6abe1b4646635--error" x-text="errorText"></div>
6185  </div></div>
6186  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country_6abe1b4646635--error" x-text="errorText"></div>
6187  </div>        </fieldset>
6188    </template>
6189</div>
6190                      
6191                      <div data-blackbaud>
6191
6192                          <input type="hidden" name="blackbaudPublicKey" value="40ba8fee-b267-4567-b0db-8cac71cc1abf" />
6193<input type="hidden" name="blackbaudPaymentConfigurationId" value="5001b34e-4cc5-43ee-a7d6-f09b9a1d33a3" />                      </div>
6194
6195                                           </div>
6196          <div class="cart__footer">
6197                          <template x-if="isCartItemsMatched">
6198                            <div role="alert" class="banner__link">
6199    Your donation is matched
6200  </div>
6201                          </template>
6202                          <div class="cart__footer--total">
6203                            <div class="tw-flex tw-justify-between tw-text-lg tw-text-gray-900">
6204  <p class="tw-uppercase">Subtotal:</p>
6205  <p class="tw-font-bold" x-text="subtotalText"></p>
6206</div>
6207<template x-if="hasGiftCard">
6208  <div>
6209    <div class="tw-flex tw-justify-between tw-text-sm tw-text-gray-900 tw-uppercase">
6210      <span>Gift Card Applied:</span>
6211      <span x-text="giftCardAppliedText"></span>
6212    </div>
6213    <div class="tw-border-t tw-border-solid tw-border-disabled-grey tw-flex tw-justify-between tw-mt-3 tw-pt-3 tw-text-lg tw-text-gray-900 tw-uppercase">
6214      <span>Total:</span>
6215      <span class="tw-font-bold" x-text="totalText"></span>
6216    </div>
6217  </div>
6218</template>                            <div class="tw-mt-6">
6219                              <template x-if="isNotFree">
6220                                <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-flex-row-reverse tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-[30px] tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit" @click="pushSFMC">
6221                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white"></span>                Next
6222                    <span class="loader"></span>
6223            </button>
6224                              </template>
6225                              <template x-if="isFree">
6226                                <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-[30px] tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
6227                    <span aria-hidden="true" class="tw-icon sprite-secure-mask tw-bg-clarity-white"></span>                Donate
6228                    <span class="loader"></span>
6229            </button>
6230                              </template>
6231                            </div>
6232                            <div class="tw-text-center">
6233                              <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-[15px] tw-text-center tw-uppercase" @click="closeCart" @keydown.enter="closeCart" @keydown.space="closeCart" tabindex="0" type="button" role="button" target=_self>
6234        Keep Browsing
6235             </a>                            </div>
6236                          </div>
6237                        </div>
6238      </div>
6239</form>
6240                  <form
6241  @submit.prevent="nextStep"
6242  x-show="isCurrentStep"
6243  data-step=4
6244  data-name="payment"
6245  data-title="Payment"
6246  :data-current-step="isCurrentStep"
6247  class="tw-h-full"
6248  data-validate
6249>
6250  <div class="cart__form">    
6251    <div class="tw-flex tw-flex-col tw-flex-1 tw-flow-root tw-mb-12 tw-p-6">
6252                      <fieldset 
6253    class="braintree-fields tw-flex tw-flex-col tw-gap-y-4"
6254    data-form-id="multistepForm-6abe1b4646635"
6255    data-braintree
6256>
6257    <legend class="tw-font-bold tw-py-4">Credit Card Information</legend>
6258
6259    
6260        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="card-number">
6261  <label class="form__label" for="card-number" 
6262  >
6263    Card Number<span x-show="required">*</span>
6264  </label>
6265  <div id="card-number" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
6266  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="card-number--error" x-text="errorText"></div>
6267  </div>
6268        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="cvv">
6269  <label class="form__label" for="cvv" 
6270  >
6271    CVV<span x-show="required">*</span>
6272  </label>
6273  <div id="cvv" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
6274  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="cvv--error" x-text="errorText"></div>
6275  </div>
6276        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="expiration-date">
6277  <label class="form__label" for="expiration-date" 
6278  >
6279    Expiration Date<span x-show="required">*</span>
6280  </label>
6281  <div id="expiration-date" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
6282  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="expiration-date--error" x-text="errorText"></div>
6283  </div>
6284        
6285        <input type="hidden" name="payment_method" value="braintree">
6286        
6287        <div x-data="DataLayer" x-load="visible" x-init="addPaymentInfo">
6288            <input type="hidden" x-ref="productData" :value="productData">
6289        </div>  
6290    </fieldset>                                           </div>
6291          <div class="cart__footer">
6292                          <div class="cart__footer--total">
6293                            <div class="tw-flex tw-justify-between tw-text-lg tw-text-gray-900">
6294  <p class="tw-uppercase">Subtotal:</p>
6295  <p class="tw-font-bold" x-text="subtotalText"></p>
6296</div>
6297<template x-if="hasGiftCard">
6298  <div>
6299    <div class="tw-flex tw-justify-between tw-text-sm tw-text-gray-900 tw-uppercase">
6300      <span>Gift Card Applied:</span>
6301      <span x-text="giftCardAppliedText"></span>
6302    </div>
6303    <div class="tw-border-t tw-border-solid tw-border-disabled-grey tw-flex tw-justify-between tw-mt-3 tw-pt-3 tw-text-lg tw-text-gray-900 tw-uppercase">
6304      <span>Total:</span>
6305      <span class="tw-font-bold" x-text="totalText"></span>
6306    </div>
6307  </div>
6308</template>                            <div class="tw-mt-6">
6309                              <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-[30px] tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
6310                    <span aria-hidden="true" class="tw-icon sprite-secure-mask tw-bg-clarity-white"></span>                Donate
6311                    <span class="loader"></span>
6312            </button>
6313                            </div>
6314                            <div class="tw-text-center">
6315                              <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-[15px] tw-text-center tw-uppercase" @click="closeCart" @keydown.enter="closeCart" @keydown.space="closeCart" tabindex="0" type="button" role="button" target=_self>
6316        Keep Browsing
6317             </a>                            </div>
6318                          </div>
6319                        </div>
6320      </div>
6321</form>
6322        </div>
6323    </div>
6324</div>
6325
6326          </div>
6327        </div>
6328      </div>
6329    </div>
6330  </div>
6331</div>
6332
6333 
6334        <div x-data="CartConflictModal" x-load x-cloak>
6335  <dialog
6336    x-ref="dialog"
6337    tabindex="-1"
6338    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-60"
6339    x-trap.noscroll="dialogOpen"
6340    role="alertdialog"
6341    aria-modal="true"
6342  >
6343    <div class="tw-w-11/12 tw-max-w-lg tw-mx-auto tw-rounded-lg tw-bg-white tw-p-6 tw-text-center">
6344      <h2 class="tw-text-3xl tw-mb-4 tw-font-libre-baskerville" x-text="title"></h2>
6345      <p class="tw-text-md tw-leading-9 tw-text-neutral-700 tw-mb-6" x-text="message"></p>
6346
6347      <div class="tw-flex-col tw-gap-3 tw-justify-center tw-uppercase">
6348        <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-w-full" @click="openOtherCart" type="button">
6349                <span>Proceed To Order</span>
6350            </button>
6351
6352        <div class="tw-text-center">
6353          <a class="link__inline tw-font-montserrat tw-inline-flex tw-items-center tw-text-grand-blue tw-text-sm tw-tracking-[1px]  tw-cursor-pointer tw-mt-3 tw-text-center tw-uppercase" @click="close" type="button" role="button" target=_self>
6354        Go back
6355             </a>        </div>
6356      </div>
6357    </div>
6358  </dialog>
6359</div>  
6360
6361        
6362                    <div hidden x-data="DataLayer" x-init="viewAttribution" x-load data-event-name="push_attribution">
6363    <input type="hidden" x-ref="isourceRef" value="">
6364    <input type="hidden" x-ref="msourceRef" value="">
6365    <input type="hidden" x-ref="utmCampaignRef" value="">
6366    <input type="hidden" x-ref="utmContentRef" value="">
6367    <input type="hidden" x-ref="utmMediumRef" value="">
6368    <input type="hidden" x-ref="utmSourceRef" value="">
6369    <input type="hidden" x-ref="utmTermRef" value="">
6370    <input type="hidden" x-ref="currentPageUrlRef" value="/">
6371</div>     
6372        
6373                            
6374            <div class="conversion-donation-form" hidden>
6375    
6376    
6377    <div 
6378        x-data="DonationCheckout" 
6379        x-load
6380        data-frequency="monthly"
6381        data-steps="{&quot;one-time&quot;:[1,2,3,4],&quot;monthly&quot;:[1,2,3],&quot;yearly&quot;:[1,2,3],&quot;free&quot;:[1,3]}"
6382        class="tw-max-w-md tw-w-full"
6383    >
6384        <div
6385    x-data="MultistepForm" 
6386    x-load
6387    x-ref="form"
6388    id="multistepForm-6abe1b4648ab6"
6389    data-frequency=monthly
6390    data-steps=&quot;&quot;
6391    data-payment-method="credit-card"
6392    data-payment-processor=blackbaud
6393    class="theme--clarity-white tw-bg-theme-background tw-border-[3px] tw-border-vista-blue"
6394>
6395    
6396    <template x-teleport="body">
6397        <div 
6398            x-show="showProcessingOverlay"
6399            class="tw-bg-black/[.8] tw-flex tw-fixed tw-h-full tw-justify-center tw-items-center tw-left-0 tw-top-0 tw-w-full tw-z-50"
6400        >
6401            <div class="tw-text-center tw-text-white"> 
6402                <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-white tw-text-4xl"></span>                <p class="tw-mt-2">
6403                    Success!
6404                </p>
6405                <p class="tw-mt-2 tw-text-base">
6406                    Please be patient while we send you to a confirmation page.
6407                </p>
6408            </div>
6409        </div>
6410    </template>
6411    <div class="tw-flex tw-flex-col tw-h-full  tw-overflow-visible">
6412        <div class="form__header tw-relative">
6413            
6414            <div 
6415                x-show="hasErrors"
6416                x-cloak
6417                class="form__errors tw-bg-alert-red tw-p-2 tw-text-sm tw-text-white"
6418            >
6419                <p class="tw-mt-[14px]">We are unable to process your request. Please try again, or view common solutions on <a href="/support/troubleshooting" class="link__inline tw-text-white" target="_blank">our help page.</a> You can also contact our Donor Services team at 855.9HUNGER (855.948.6437).</p>
6420            </div>
6421            
6422                            <nav aria-label="Multistep Form Navigation" class="form__navigation tw-flex tw-font-bold tw-gap-x-2 tw-justify-between tw-flex tw-px-4 tw-py-3 tw-items-center tw-text-sm">
6423                    
6424                                            <button x-show="isNotFirstStep" x-cloak @click="prevStep" class="tw-flex tw-flex-1 tw-justify-start">
6425                            <span class="tw-sr-only">Previous Step</span>
6426                            <span aria-hidden="true" class="tw-icon sprite-back-arrow-form-mask tw-text-xl tw-bg-clarity-white"></span>                        </button>
6427                    
6428                    
6429                    <div class="tw-uppercase tw-bold" x-text="stepTitle"></div>
6430
6431                    
6432                    <ul class="tw-flex tw-flex-1 tw-gap-x-2 tw-justify-end">
6433                        <template x-for="i in getSteps">
6434                            <li
6435                                class="form__navigation--bullet"
6436                                :data-step="i"
6437                                x-effect="isActive">
6438                            </li>
6439                        </template>
6440                    </ul>
6441                </nav>
6442                                        <div 
6443    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
6444    x-show="showSummary"
6445    x-cloak
6446    data-summary-step="1" 
6447    data-summary-title="Your Donation Amount" 
6448    data-summary-name="product"
6449>
6450            <div class="tw-mr-[10px]">
6451            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
6452        <div class="tw-flex tw-flex-col tw-flex-1">
6453                    <div class="tw-font-bold">Your Donation Amount</div>
6454                <template x-if="isMonthly">
6455                        <div>
6456                            <span x-text="totalDollarAmount"></span><abbr title="per month" class="tw-no-underline">/mo</abbr>
6457                        </div>
6458                    </template>
6459                    <template x-if="isYearly">
6460                        <div>
6461                            <span x-text="totalDollarAmount"></span><abbr title="per year" class="tw-no-underline">/yr</abbr>
6462                        </div>
6463                    </template>
6464                    <template x-if="isOnetime">
6465                        <div>
6466                            <span x-text="totalDollarAmount"></span>
6467                        </div>
6468                    </template>
6469                    <div x-show="hasProcessingFee" class="tw-text-xs">includes <span x-text="processingFeeDollarAmount"></span> to cover payment processing costs.</div>
6470    </div>
6471    </div>                <div x-show="isGivingInHonor">
6472                    <div 
6473    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
6474    x-show="showSummary"
6475    x-cloak
6476    data-summary-step="1" 
6477    data-summary-title="Give in Honor" 
6478    data-summary-name="Give in Honor"
6479>
6480            <div class="tw-mr-[10px]">
6481            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
6482        <div class="tw-flex tw-flex-col tw-flex-1">
6483                    <div class="tw-font-bold">Give in Honor</div>
6484                <div class="tw-text-xs">
6485                        You&apos;ll have the opportunity to fill out a free card after your donation
6486                    </div>
6487    </div>
6488    </div>                </div>
6489                <div 
6490    class="form__summary tw-flex tw-py-5 tw-px-8 tw-text-sm" 
6491    x-show="showSummary"
6492    x-cloak
6493    data-summary-step="3" 
6494    data-summary-title="Details" 
6495    data-summary-name="billing"
6496>
6497            <div class="tw-mr-[10px]">
6498            <span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue tw-text-sm"></span>        </div>
6499        <div class="tw-flex tw-flex-col tw-flex-1">
6500                    <div class="tw-font-bold">Details</div>
6501                <div>
6502                        <div>
6503                            <span data-summary-value="firstName"></span>
6504                            <span data-summary-value="lastName"></span>
6505                        </div>
6506                        <div data-summary-value="email"></div>
6507                        <div>
6508                            <span data-summary-value="address1"></span> 
6509                            <span data-summary-value="address2"></span>
6510                            <span data-summary-value="city"></span>,
6511                            <span data-summary-value="state"></span>
6512                            <span data-summary-value="zipcode"></span>
6513                        </div>
6514                    </div>
6515    </div>
6516    </div>
6517                    </div>
6518        <div class="form__body tw-h-full tw-text-theme-color">
6519            <form
6520  @submit.prevent="nextStep"
6521  x-show="isCurrentStep"
6522  data-step=1
6523  data-name="product"
6524  data-title="Your Gift"
6525  :data-current-step="isCurrentStep"
6526  class="tw-h-full"
6527  
6528>
6529  <div class="tw-pb-[30px] tw-px-[30px]">    
6530    <input type="hidden" name="_token" value="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_UJu5ZpbMBft1ACWK_wrap"  style="display: none" aria-hidden="true">
6531        <input id="voight-kampff_UJu5ZpbMBft1ACWK"
6532               name="voight-kampff_UJu5ZpbMBft1ACWK"
6533               type="text"
6534               value=""
6535                              autocomplete="nope"
6536               tabindex="-1">
6537        <input name="valid_from"
6538               type="text"
6539               value="eyJpdiI6IkltcjgwOTdhR3RQa0hSNjJ4cU8zU3c9PSIsInZhbHVlIjoiSUpEVWVYNmlraDZIWlUxOTIwZTFrQT09IiwibWFjIjoiNWQ4Yjc5YjMxNzNjODc0MzkwYTJmNzRhZmY1NTA0ZjgzNzhlNjlkNDdjOTlhNTljM2I3OGQ5MzA1NzIxNmZkYSIsInRhZyI6IiJ9"
6540                              autocomplete="off"
6541               tabindex="-1">
6542    </div>
6543                    <input type="hidden" name="msource" value="">
6544<input type="hidden" name="isource" value="">
6545<input type="hidden" name="utm_campaign" value="">
6546<input type="hidden" name="utm_source" value="">
6547<input type="hidden" name="utm_medium" value="">
6548<input type="hidden" name="utm_term" value="">
6549<input type="hidden" name="utm_content" value="">
6550                <input type="hidden" name="lr_id" value="">
6551                
6552                                    <div 
6553    x-data="SwitchToggle" 
6554    x-load
6555    x-cloak
6556    role="tablist" 
6557    data-default="monthly"
6558    class="tw-rounded-[50px] tw-text-clarity-white tw-flex tw-list-none tw-my-6 tw-bg-vista-blue-light tw-flex tw-bg-vista-blue-light tw-list-none tw-my-6"
6559>
6560            <div class="tw-basis-1/2 tw-order-1">
6561            <a @click.prevent="updateFrequency" href="#donation-yearly" role="tab"
6562                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="yearly" x-ref="yearly" data-toggle
6563            >
6564                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isYearly" x-cloak="x-cloak"></span>                Annually
6565            </a>
6566        </div>
6567                        <div class="tw-basis-1/2 tw-order-1">
6568            <a @click.prevent="updateFrequency" href="#donation-one-time" role="tab"
6569                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="one-time" x-ref="one-time" data-toggle
6570            >
6571                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isOnetime" x-cloak="x-cloak"></span>                One&nbsp;Time
6572            </a>
6573        </div>
6574                <div class="tw-basis-1/2 ">
6575            <a @click.prevent="updateFrequency" href="#donation-monthly" role="tab"
6576                class="tw-flex tw-gap-2 tw-items-center tw-justify-center tw-h-full tw-text-center tw-py-3 tw-px-2 md:tw-px-2 lg:tw-px-4 tw-text-black [&amp;.is-active]:tw-bg-active-blue [&amp;.is-active]:tw-text-white [&amp;.is-active]:tw-font-extrabold is-active tw-rounded-[50px] tw-text-sm lg:tw-text-base" data-frequency="monthly" x-ref="monthly" data-toggle
6577            >
6578                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white" aria-hidden="aria-hidden" x-show="isMonthly" x-cloak="x-cloak"></span>                Monthly
6579            </a>
6580        </div>
6581    </div>
6582
6583                    <fieldset class="tw-pt-[15px]">
6584                        
6585                                                    <template x-if="isOnetime">
6586                                <div>
6587                                    <legend class="tw-sr-only">One-time Amounts</legend>
6588                                    <div 
6589    x-data="DonationProduct" 
6590    x-load
6591    data-product-amount="125"
6592    data-product-sku="600888081WMNLP" 
6593    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
6594    data-product-is-monthly="0"
6595    data-product-is-yearly="0"
6596    data-product-is-custom-amount="0"
6597    data-product-quantity="1"
6598    data-product-price="50"
6599    data-product-type="gift_catalog_donation"
6600    data-product-is-matched="0" 
6601    data-product-match-amount="0"
6602    >
6603    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;
6603A FREE gift will be sent to supporters who choose to give a monthly gift. &quot;,&quot;matched&quot;:{&quot;monthly&quot;:&quot;We&#039;ll send you a free gift with your monthly donation!&quot;},&quot;value&quot;:&quot;Increase your monthly donation to $20\/month to receive a FREE gift. &quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
6604        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" data-state="default">
6605                            <div class="" data-premium-lightbox>
6606                    <div x-data="LightboxImage" x-load data-gallery='false'>
6607  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b4648f71-lightbox">
6608    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
6609    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
6610      <span class="tw-sr-only">Enlarge image</span>
6611      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
6612  </figure>
6613
6614  <dialog
6615    x-ref="dialog"
6616    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
6617    x-trap.noscroll="dialogOpen"
6618  >
6619          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
6620        
6621        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
6622
6623          
6624          <img
6625            x-ref="mainImage"
6626            loading="lazy"
6627            alt="Cultivate a Kinder World Hat"
6628            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
6629            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
6630          />
6631
6632          
6633          <button
6634            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
6635            type="button"
6636            x-on:click="close"
6637          >
6638            <span class="tw-sr-only">Close dialog</span>
6639            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
6640
6641        </div>
6642
6643        
6644        
6645        <button
6646          x-show="hasMultiple"
6647          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
6648          type="button"
6649          x-on:click="prev"
6650        >
6651          <span class="tw-sr-only">Previous image</span>
6652          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
6653
6654        
6655        <button
6656          x-show="hasMultiple"
6657          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
6658          type="button"
6659          x-on:click="next"
6660        >
6661          <span class="tw-sr-only">Next image</span>
6662          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
6663
6664      </figure>
6665      </dialog>
6666</div>                </div>
6667                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
6668                A FREE gift will be sent to supporters who choose to give a monthly gift. 
6669            </p>
6670            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
6671                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
6672        </div>
6673                            </div>
6674            <div 
6675  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
6676>
6677  <div class="tw-relative" x-data="FormElement" x-load>
6678    <label class="form__radio-button" for="amount-6abe1b464911a">
6679        <input 
6680            type="radio" 
6681            id="amount-6abe1b464911a" 
6682            name="amount" 
6683            value="250" 
6684            class="tw-sr-only"
6685            
6686            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6687            x-ref="element"
6688        />
6689        $250
6690    </label>
6691</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6692    <label class="form__radio-button" for="amount-6abe1b464914a">
6693        <input 
6694            type="radio" 
6695            id="amount-6abe1b464914a" 
6696            name="amount" 
6697            value="125" 
6698            class="tw-sr-only"
6699            checked
6700            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6701            x-ref="element"
6702        />
6703        $125
6704    </label>
6705</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6706    <label class="form__radio-button" for="amount-6abe1b4649172">
6707        <input 
6708            type="radio" 
6709            id="amount-6abe1b4649172" 
6710            name="amount" 
6711            value="75" 
6712            class="tw-sr-only"
6713            
6714            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6715            x-ref="element"
6716        />
6717        $75
6718    </label>
6719</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6720    <label class="form__radio-button" for="amount-6abe1b4649196">
6721        <input 
6722            type="radio" 
6723            id="amount-6abe1b4649196" 
6724            name="amount" 
6725            value="35" 
6726            class="tw-sr-only"
6727            
6728            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6729            x-ref="element"
6730        />
6731        $35
6732    </label>
6733</div>                        <div 
6734    x-data="CustomAmountRadioButton" 
6735    x-load
6736    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6737>
6738    <div 
6739        x-ref="radio-button"
6740        x-show="isRadioButtonActive"
6741    >
6742        <div class="tw-relative" x-data="FormElement" x-load>
6743    <label class="form__radio-button" for="amount-6abe1b46491e3">
6744        <input 
6745            type="radio" 
6746            id="amount-6abe1b46491e3" 
6747            name="amount" 
6748            value="other" 
6749            class="tw-sr-only"
6750            
6751            required="required"
6752            x-ref="element"
6753        />
6754        Other
6755    </label>
6756</div>    </div>
6757    <div x-data="FormElement" x-load>
6758        <label 
6759            x-cloak
6760            x-show="isCustomAmountActive"
6761            x-effect="handleActiveState"
6762            class="form__radio-button"
6763            for="custom-amount-6abe1b46491b8"
6764        >
6765            <input 
6766                @click.outside="handleOutsideClick"
6767                @input="updateRadioValue"
6768                @keydown.tab="handleTabKey"
6769                @keydown.left="handleLeftKey"
6770                id="custom-amount-6abe1b46491b8"
6771                name="custom-amount"
6772                required
6773                x-on:blur="handleBlur"
6774                x-ref="element"
6775                type="number"
6776                step="0.01"
6777                class="tw-bg-transparent tw-border-none tw-w-full"
6778                min="10"
6779            >
6780            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b4649202" x-text="errorText"></div>
6781                </label>
6782    </div>
6783</div>
6784</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
6785                        <div x-html="amountMessage"></div>
6786        </div>
6787        
6788    <input type="hidden" name="products" :value="productsJSON">
6789    <input type="hidden" name="store_id" value="12">   
6790    <input type="hidden" name="referrer" value="/">   
6791    <input type="hidden" name="banner_id" value="">   
6792
6793    
6794    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
6795        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;One Time&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;125&quot;,&quot;sku&quot;:&quot;600888081WMNLP&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
6796    </div>  
6797</div>
6798                                </div>
6799                            </template>
6800                        
6801                        
6802                                                    <template x-if="isMonthly">
6803                                <div>
6804                                    <legend class="tw-sr-only">Monthly Amounts</legend>
6805                                    <div 
6806    x-data="DonationProduct" 
6807    x-load
6808    data-product-amount="40"
6809    data-product-sku="600888081WMNLPm" 
6810    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
6811    data-product-is-monthly="1"
6812    data-product-is-yearly="0"
6813    data-product-is-custom-amount="0"
6814    data-product-quantity="1"
6815    data-product-price="50"
6816    data-product-type="gift_catalog_donation"
6817    data-product-is-matched="0" 
6818    data-product-match-amount="0"
6819    >
6820    <div data-match-amount="20" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;
6820A FREE gift will be sent to supporters who choose to give a monthly gift. &quot;,&quot;matched&quot;:{&quot;monthly&quot;:&quot;We&#039;ll send you a free gift with your monthly donation!&quot;},&quot;value&quot;:&quot;Increase your monthly donation to $20\/month to receive a FREE gift. &quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
6821        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
6822                            <div class="" data-premium-lightbox>
6823                    <div x-data="LightboxImage" x-load data-gallery='false'>
6824  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b4649308-lightbox">
6825    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
6826    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
6827      <span class="tw-sr-only">Enlarge image</span>
6828      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
6829  </figure>
6830
6831  <dialog
6832    x-ref="dialog"
6833    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
6834    x-trap.noscroll="dialogOpen"
6835  >
6836          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
6837        
6838        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
6839
6840          
6841          <img
6842            x-ref="mainImage"
6843            loading="lazy"
6844            alt="Cultivate a Kinder World Hat"
6845            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
6846            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
6847          />
6848
6849          
6850          <button
6851            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
6852            type="button"
6853            x-on:click="close"
6854          >
6855            <span class="tw-sr-only">Close dialog</span>
6856            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
6857
6858        </div>
6859
6860        
6861        
6862        <button
6863          x-show="hasMultiple"
6864          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
6865          type="button"
6866          x-on:click="prev"
6867        >
6868          <span class="tw-sr-only">Previous image</span>
6869          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
6870
6871        
6872        <button
6873          x-show="hasMultiple"
6874          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
6875          type="button"
6876          x-on:click="next"
6877        >
6878          <span class="tw-sr-only">Next image</span>
6879          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
6880
6881      </figure>
6882      </dialog>
6883</div>                </div>
6884                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
6885                We'll send you a free gift with your monthly donation!
6886            </p>
6887            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
6888                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
6889        </div>
6890                    <input name="premium" type="hidden" value="{&quot;amount&quot;:0,&quot;is_monthly&quot;:0,&quot;is_yearly&quot;:0,&quot;quantity&quot;:1,&quot;sku&quot;:&quot;69.RUWRLDCAP26&quot;,&quot;title&quot;:&quot;Cultivate Kindness Hat&quot;,&quot;type&quot;:&quot;premium&quot;,&quot;uuid&quot;:&quot;21fd2706-1c5d-4fb3-860d-e8c8b08f2516&quot;,&quot;is_matched_product&quot;:0,&quot;match_amount&quot;:0}" x-ref="premium-product" data-premium-product />
6891            <input name="premium-threshold" type="hidden" value="20" x-ref="premium-threshold" />
6892                            </div>
6893            <div 
6894  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
6895>
6896  <div class="tw-relative" x-data="FormElement" x-load>
6897    <label class="form__radio-button" for="amount-6abe1b4649499">
6898        <input 
6899            type="radio" 
6900            id="amount-6abe1b4649499" 
6901            name="amount" 
6902            value="75" 
6903            class="tw-sr-only"
6904            
6905            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6906            x-ref="element"
6907        />
6908        $75<abbr title="per month" class="tw-no-underline">/mo</abbr>
6909    </label>
6910</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6911    <label class="form__radio-button" for="amount-6abe1b46494c6">
6912        <input 
6913            type="radio" 
6914            id="amount-6abe1b46494c6" 
6915            name="amount" 
6916            value="40" 
6917            class="tw-sr-only"
6918            checked
6919            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6920            x-ref="element"
6921        />
6922        $40<abbr title="per month" class="tw-no-underline">/mo</abbr>
6923    </label>
6924</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6925    <label class="form__radio-button" for="amount-6abe1b46494ec">
6926        <input 
6927            type="radio" 
6928            id="amount-6abe1b46494ec" 
6929            name="amount" 
6930            value="30" 
6931            class="tw-sr-only"
6932            
6933            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6934            x-ref="element"
6935        />
6936        $30<abbr title="per month" class="tw-no-underline">/mo</abbr>
6937    </label>
6938</div>                            <div class="tw-relative" x-data="FormElement" x-load>
6939    <label class="form__radio-button" for="amount-6abe1b4649510">
6940        <input 
6941            type="radio" 
6942            id="amount-6abe1b4649510" 
6943            name="amount" 
6944            value="20" 
6945            class="tw-sr-only"
6946            
6947            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6948            x-ref="element"
6949        />
6950        $20<abbr title="per month" class="tw-no-underline">/mo</abbr>
6951    </label>
6952</div>                        <div 
6953    x-data="CustomAmountRadioButton" 
6954    x-load
6955    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
6956>
6957    <div 
6958        x-ref="radio-button"
6959        x-show="isRadioButtonActive"
6960    >
6961        <div class="tw-relative" x-data="FormElement" x-load>
6962    <label class="form__radio-button" for="amount-6abe1b464955b">
6963        <input 
6964            type="radio" 
6965            id="amount-6abe1b464955b" 
6966            name="amount" 
6967            value="other" 
6968            class="tw-sr-only"
6969            
6970            required="required"
6971            x-ref="element"
6972        />
6973        Other
6974    </label>
6975</div>    </div>
6976    <div x-data="FormElement" x-load>
6977        <label 
6978            x-cloak
6979            x-show="isCustomAmountActive"
6980            x-effect="handleActiveState"
6981            class="form__radio-button"
6982            for="custom-amount-6abe1b4649531"
6983        >
6984            <input 
6985                @click.outside="handleOutsideClick"
6986                @input="updateRadioValue"
6987                @keydown.tab="handleTabKey"
6988                @keydown.left="handleLeftKey"
6989                id="custom-amount-6abe1b4649531"
6990                name="custom-amount"
6991                required
6992                x-on:blur="handleBlur"
6993                x-ref="element"
6994                type="number"
6995                step="0.01"
6996                class="tw-bg-transparent tw-border-none tw-w-full"
6997                min="10"
6998            >
6999            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b464957a" x-text="errorText"></div>
7000                </label>
7001    </div>
7002</div>
7003</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
7004                        <div x-html="amountMessage"></div>
7005        </div>
7006        
7007    <input type="hidden" name="products" :value="productsJSON">
7008    <input type="hidden" name="store_id" value="17">   
7009    <input type="hidden" name="referrer" value="/">   
7010    <input type="hidden" name="banner_id" value="">   
7011
7012    
7013    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
7014        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;Monthly&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;40&quot;,&quot;sku&quot;:&quot;600888081WMNLPm&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
7015    </div>  
7016</div>
7017                                </div>
7018                            </template>
7019                        
7020                        
7021                                                    <template x-if="isYearly">
7022                                <div>
7023                                    <legend class="tw-sr-only">Yearly Amounts</legend>
7024                                    <div 
7025    x-data="DonationProduct" 
7026    x-load
7027    data-product-amount="375"
7028    data-product-sku="600888081WMNLPy" 
7029    data-product-uuid="b2821458-c5b7-11e9-a667-784f43611243"
7030    data-product-is-monthly="0"
7031    data-product-is-yearly="1"
7032    data-product-is-custom-amount="0"
7033    data-product-quantity="1"
7034    data-product-price="50"
7035    data-product-type="gift_catalog_donation"
7036    data-product-is-matched="0" 
7037    data-product-match-amount="0"
7038    >
7039    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;
7039A FREE gift will be sent to supporters who choose to give a monthly gift. &quot;,&quot;matched&quot;:{&quot;monthly&quot;:&quot;We&#039;ll send you a free gift with your monthly donation!&quot;},&quot;value&quot;:&quot;Increase your monthly donation to $20\/month to receive a FREE gift. &quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mb-7" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
7040        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" data-state="default">
7041                            <div class="" data-premium-lightbox>
7042                    <div x-data="LightboxImage" x-load data-gallery='false'>
7043  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b4649679-lightbox">
7044    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
7045    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
7046      <span class="tw-sr-only">Enlarge image</span>
7047      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
7048  </figure>
7049
7050  <dialog
7051    x-ref="dialog"
7052    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
7053    x-trap.noscroll="dialogOpen"
7054  >
7055          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
7056        
7057        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
7058
7059          
7060          <img
7061            x-ref="mainImage"
7062            loading="lazy"
7063            alt="Cultivate a Kinder World Hat"
7064            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
7065            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
7066          />
7067
7068          
7069          <button
7070            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
7071            type="button"
7072            x-on:click="close"
7073          >
7074            <span class="tw-sr-only">Close dialog</span>
7075            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
7076
7077        </div>
7078
7079        
7080        
7081        <button
7082          x-show="hasMultiple"
7083          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7084          type="button"
7085          x-on:click="prev"
7086        >
7087          <span class="tw-sr-only">Previous image</span>
7088          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
7089
7090        
7091        <button
7092          x-show="hasMultiple"
7093          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7094          type="button"
7095          x-on:click="next"
7096        >
7097          <span class="tw-sr-only">Next image</span>
7098          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
7099
7100      </figure>
7101      </dialog>
7102</div>                </div>
7103                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
7104                A FREE gift will be sent to supporters who choose to give a monthly gift. 
7105            </p>
7106            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
7107                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
7108        </div>
7109                            </div>
7110            <div 
7111  class="tw-gap-[18px] tw-grid tw-grid-cols-2"
7112>
7113  <div class="tw-relative" x-data="FormElement" x-load>
7114    <label class="form__radio-button" for="amount-6abe1b4649803">
7115        <input 
7116            type="radio" 
7117            id="amount-6abe1b4649803" 
7118            name="amount" 
7119            value="625" 
7120            class="tw-sr-only"
7121            
7122            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
7123            x-ref="element"
7124        />
7125        $625<abbr title="per year" class="tw-no-underline">/yr</abbr>
7126    </label>
7127</div>                            <div class="tw-relative" x-data="FormElement" x-load>
7128    <label class="form__radio-button" for="amount-6abe1b4649830">
7129        <input 
7130            type="radio" 
7131            id="amount-6abe1b4649830" 
7132            name="amount" 
7133            value="375" 
7134            class="tw-sr-only"
7135            checked
7136            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
7137            x-ref="element"
7138        />
7139        $375<abbr title="per year" class="tw-no-underline">/yr</abbr>
7140    </label>
7141</div>                            <div class="tw-relative" x-data="FormElement" x-load>
7142    <label class="form__radio-button" for="amount-6abe1b4649856">
7143        <input 
7144            type="radio" 
7145            id="amount-6abe1b4649856" 
7146            name="amount" 
7147            value="225" 
7148            class="tw-sr-only"
7149            
7150            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
7151            x-ref="element"
7152        />
7153        $225<abbr title="per year" class="tw-no-underline">/yr</abbr>
7154    </label>
7155</div>                            <div class="tw-relative" x-data="FormElement" x-load>
7156    <label class="form__radio-button" for="amount-6abe1b464987a">
7157        <input 
7158            type="radio" 
7159            id="amount-6abe1b464987a" 
7160            name="amount" 
7161            value="175" 
7162            class="tw-sr-only"
7163            
7164            x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
7165            x-ref="element"
7166        />
7167        $175<abbr title="per year" class="tw-no-underline">/yr</abbr>
7168    </label>
7169</div>                        <div 
7170    x-data="CustomAmountRadioButton" 
7171    x-load
7172    class="tw-col-span-full" x-effect="updateAmountMessageOnRender" @change="handleAmountChange" data-message=""
7173>
7174    <div 
7175        x-ref="radio-button"
7176        x-show="isRadioButtonActive"
7177    >
7178        <div class="tw-relative" x-data="FormElement" x-load>
7179    <label class="form__radio-button" for="amount-6abe1b46498c5">
7180        <input 
7181            type="radio" 
7182            id="amount-6abe1b46498c5" 
7183            name="amount" 
7184            value="other" 
7185            class="tw-sr-only"
7186            
7187            required="required"
7188            x-ref="element"
7189        />
7190        Other
7191    </label>
7192</div>    </div>
7193    <div x-data="FormElement" x-load>
7194        <label 
7195            x-cloak
7196            x-show="isCustomAmountActive"
7197            x-effect="handleActiveState"
7198            class="form__radio-button"
7199            for="custom-amount-6abe1b464989b"
7200        >
7201            <input 
7202                @click.outside="handleOutsideClick"
7203                @input="updateRadioValue"
7204                @keydown.tab="handleTabKey"
7205                @keydown.left="handleLeftKey"
7206                id="custom-amount-6abe1b464989b"
7207                name="custom-amount"
7208                required
7209                x-on:blur="handleBlur"
7210                x-ref="element"
7211                type="number"
7212                step="0.01"
7213                class="tw-bg-transparent tw-border-none tw-w-full"
7214                min="10"
7215            >
7216            <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="custom-amount--error-6abe1b46498e3" x-text="errorText"></div>
7217                </label>
7218    </div>
7219</div>
7220</div>        <div x-show="showAmountMessage" class="tw-flex tw-gap-4 tw-leading-loose tw-items-center tw-mt-5 tw-text-rich-orange tw-text-xs">
7221                        <div x-html="amountMessage"></div>
7222        </div>
7223        
7224    <input type="hidden" name="products" :value="productsJSON">
7225    <input type="hidden" name="store_id" value="19">   
7226    <input type="hidden" name="referrer" value="/">   
7227    <input type="hidden" name="banner_id" value="">   
7228
7229    
7230    <div x-data="DataLayer" x-load="visible" x-init="viewProduct">
7231        <input type="hidden" x-ref="productData" value="{&quot;frequency&quot;:&quot;Yearly&quot;,&quot;quantity&quot;:&quot;1&quot;,&quot;price&quot;:&quot;375&quot;,&quot;sku&quot;:&quot;600888081WMNLPy&quot;,&quot;title&quot;:&quot;Give Where Needed Most&quot;}">
7232    </div>  
7233</div>
7234                                </div>
7235                            </template>
7236
7237                            
7238                                                    
7239
7240                        <input type="hidden" name="productUUID" value="b2821458-c5b7-11e9-a667-784f43611243" />
7241                        <div data-blackbaud>
7241
7242                            <input type="hidden" name="blackbaudPublicKey" value="40ba8fee-b267-4567-b0db-8cac71cc1abf" />
7243<input type="hidden" name="blackbaudPaymentConfigurationId" value="5001b34e-4cc5-43ee-a7d6-f09b9a1d33a3" />                        </div>
7244                    </fieldset>
7245
7246                    
7247                        
7248                    
7249                    
7250                    
7251                                            <div 
7252    x-data="GiveInHonorCheckbox" 
7253    x-load 
7254    x-cloak 
7255    class="tw-mt-7 tw-px-2"
7256>
7257    <div class="tw-flex tw-gap-1 tw-justify-center tw-items-center">
7258        <div class="tw-relative">
7259            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
7260    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" name="orderHonoree" id="giveinHonorCheck-6abe1b4648ab6" x-on:click="toggleIsGivingInHonor">
7261    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-size-4">
7262        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
7263    <label for="giveinHonorCheck-6abe1b4648ab6" class="tw-ml-2 tw-text-sm">
7264        Give as a Gift or in Memory
7265    </label>
7266    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="giveinHonorCheck-6abe1b4648ab6--error" x-text="errorText"></div>
7267</div>        </div>
7268        <span class="tw-relative" x-data="Tooltip" x-load x-on:click.outside="handleOutsideClick">
7269  <button
7270    aria-label="Info about processing fee." 
7271    type="button"
7272    class="tw-flex"
7273    x-on:mouseenter="showTooltip"
7274    x-on:mouseleave="hideTooltip"
7275    x-on:click="toggleTooltip"
7276    x-ref="tooltip-button"
7277  >
7278    <span aria-hidden="true" class="tw-icon sprite-question-mask tw-bg-black text-base"></span>  </button>
7279  <p class="tooltip tw-absolute tw-bg-clarity-white tw-text-black tw-left-1/2 tw-p-4 tw-shadow-xl tw-text-center tw-text-xs -tw-top-5 tw-transform -tw-translate-x-1/2 -tw-translate-y-full tw-w-48 tw-z-10 -tw-translate-x-3/4 sm:-tw-translate-x-1/2 md:-tw-translate-x-3/4 lg:-tw-translate-x-1/2" x-cloak x-show="isTooltipActive"
7280          x-transition:enter="tw-transition tw-ease-in-out tw-duration-300"
7281          x-transition:enter-start="tw-opacity-0"
7282          x-transition:enter-end="tw-opacity-100"
7283          x-transition:leave="tw-transition tw-ease-in-out tw-duration-300"
7284          x-transition:leave-start="tw-opacity-100"
7285          x-transition:leave-end="tw-opacity-0"
7286      >
7287    When you donate a gift to someone, you'll have the option to create a free card after your donation is complete.
7288  </p>
7289</span>
7290    </div>
7291    <div x-show="isGivingInHonor" id="giveInHonorMessage-6abe1b4648ab6"
7292        class="tw-pt-5 tw-text-center tw-text-active-blue tw-text-sm">
7293        You'll have the option to create a free card after your donation is complete
7294    </div>
7295</div>
7296          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-flex-row-reverse tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
7297                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white"></span>                Next
7298                    <span class="loader"></span>
7299            </button>
7300      </div>
7301</form>
7302            <form
7303  @submit.prevent="nextStep"
7304  x-show="isCurrentStep"
7305  data-step=2
7306  data-name="payment-options"
7307  data-title="Payment Type"
7308  :data-current-step="isCurrentStep"
7309  class="tw-h-full"
7310  
7311>
7312  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
7313    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;
7313A FREE gift will be sent to supporters who choose to give a monthly gift. &quot;,&quot;matched&quot;:{&quot;monthly&quot;:&quot;We&#039;ll send you a free gift with your monthly donation!&quot;},&quot;value&quot;:&quot;Increase your monthly donation to $20\/month to receive a FREE gift. &quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-mt-6" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
7314        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
7315                            <div class="" data-premium-lightbox>
7316                    <div x-data="LightboxImage" x-load data-gallery='false'>
7317  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b4649bba-lightbox">
7318    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
7319    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
7320      <span class="tw-sr-only">Enlarge image</span>
7321      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
7322  </figure>
7323
7324  <dialog
7325    x-ref="dialog"
7326    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
7327    x-trap.noscroll="dialogOpen"
7328  >
7329          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
7330        
7331        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
7332
7333          
7334          <img
7335            x-ref="mainImage"
7336            loading="lazy"
7337            alt="Cultivate a Kinder World Hat"
7338            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
7339            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
7340          />
7341
7342          
7343          <button
7344            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
7345            type="button"
7346            x-on:click="close"
7347          >
7348            <span class="tw-sr-only">Close dialog</span>
7349            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
7350
7351        </div>
7352
7353        
7354        
7355        <button
7356          x-show="hasMultiple"
7357          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7358          type="button"
7359          x-on:click="prev"
7360        >
7361          <span class="tw-sr-only">Previous image</span>
7362          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
7363
7364        
7365        <button
7366          x-show="hasMultiple"
7367          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7368          type="button"
7369          x-on:click="next"
7370        >
7371          <span class="tw-sr-only">Next image</span>
7372          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
7373
7374      </figure>
7375      </dialog>
7376</div>                </div>
7377                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
7378                A FREE gift will be sent to supporters who choose to give a monthly gift. 
7379            </p>
7380            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
7381                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
7382        </div>
7383                            </div>
7384                <div class="form__processing-checkbox">
7385    <div class="tw-flex tw-gap-1 tw-items-center">
7386        <div class="tw-relative">
7387            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
7388    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" id="processingFeeToggle-6abe1b4648ab6" x-on:change="toggleProcessingFee">
7389    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-size-4">
7390        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
7391    <label for="processingFeeToggle-6abe1b4648ab6" class="tw-ml-2 tw-text-xs">
7392        <template x-if="isOnetime">
7393                    <span>
7394                        Contribute <span x-text="processingFeeDollarAmount"></span> to cover your transaction costs.
7395                    </span>
7396                </template>
7397                <template x-if="isMonthly">
7398                    <span>
7399                        Contribute <span x-text="processingFeeDollarAmount"></span> each month to cover your transaction costs.
7400                    </span>
7401                </template>
7402                <template x-if="isYearly">
7403                    <span>
7404                        Contribute <span x-text="processingFeeDollarAmount"></span> each year to cover your transaction costs.
7405                    </span>
7406                </template>
7407    </label>
7408    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="processingFeeToggle-6abe1b4648ab6--error" x-text="errorText"></div>
7409</div>        </div>
7410        <span class="tw-relative" x-data="Tooltip" x-load x-on:click.outside="handleOutsideClick">
7411  <button
7412    aria-label="Info about processing fee." 
7413    type="button"
7414    class="tw-flex"
7415    x-on:mouseenter="showTooltip"
7416    x-on:mouseleave="hideTooltip"
7417    x-on:click="toggleTooltip"
7418    x-ref="tooltip-button"
7419  >
7420    <span aria-hidden="true" class="tw-icon sprite-question-mask tw-bg-black text-base"></span>  </button>
7421  <p class="tooltip tw-absolute tw-bg-clarity-white tw-text-black tw-left-1/2 tw-p-4 tw-shadow-xl tw-text-center tw-text-xs -tw-top-5 tw-transform -tw-translate-x-1/2 -tw-translate-y-full tw-w-48 tw-z-10 " x-cloak x-show="isTooltipActive"
7422          x-transition:enter="tw-transition tw-ease-in-out tw-duration-300"
7423          x-transition:enter-start="tw-opacity-0"
7424          x-transition:enter-end="tw-opacity-100"
7425          x-transition:leave="tw-transition tw-ease-in-out tw-duration-300"
7426          x-transition:leave-start="tw-opacity-100"
7427          x-transition:leave-end="tw-opacity-0"
7428      >
7429    <template x-if="isOnetime">
7430                <span>
7431                    Covering the transaction fee helps offset processing and administrative fees that we incur through taking payments online.
7432                </span>
7433            </template>
7434            <template x-if="isMonthly">
7435                <span>
7436                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
7437                </span>
7438            </template>
7439            <template x-if="isYearly">
7440                <span>
7441                    Covering the transaction fee for each payment helps offset processing and administrative fees that we incur through taking payments online.
7442                </span>
7443            </template>
7444  </p>
7445</span>
7446        <template x-if="showProcessingFee">
7447            <input type="hidden" name="processingFee" :value="processingFee">
7448        </template>
7449        <input type="hidden" name="coverProcessingFee" :value="hasProcessingFee" value="
74490">
7450    </div>
7451</div>
7452                <hr class="tw-border-t tw-border-t-soil-brown tw-mt-8" />
7453                <div x-show="isRecurring" class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" aria-hidden="true">
7454    <div class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</div>
7455</div>
7456
7457<fieldset class="tw-flex tw-flex-col tw-gap-y-[15px] tw-mt-8 tw-w-full" x-show="isOnetime">
7458    <legend class="tw-font-bold tw-mb-[15px] tw-text-sm">Choose your payment option</legend>
7459    
7460        
7461        
7462                            <div 
7463                @click="submitForm"
7464                data-payment-method="apple-pay"
7465                class="apple-pay-button apple-pay-button-black tw-cursor-pointer tw-rounded-none tw-h-[50px] tw-w-full"
7466                hidden
7467            >
7468                
7469                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
7470                    <input type="hidden" x-ref="paymentRef" value="apple-pay">
7471                </div>
7472            </div>
7473            
7474                    <div>
7475                <button 
7476                    @click="submitForm"    
7477                    class="tw-bg-black tw-min-h-[50px] tw-w-full" 
7478                    aria-label="Google Pay" 
7479                    type="button"
7480                    data-payment-method="google-pay"
7481                >
7482                    <span aria-hidden="true" class="tw-icon sprite-google-pay-mark tw-text-[50px]"></span>                </button>
7483                
7484                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
7485                    <input type="hidden" x-ref="paymentRef" value="google-pay">
7486                </div>
7487            </div>
7488        
7489        
7490                    
7491        
7492        
7493                    <button 
7494                @click="submitForm"   
7495                class="venmo-button tw-hidden tw-h-[50px] tw-w-full tw-bg-[#008CFF]"
7496                type="button"
7497                data-payment-method="venmo"
7498            >
7499                <div class="tw-h-[50px] tw-pb-0 tw-mb-0 tw-overflow-hidden">
7500                    <div class="tw-h-[50px]">
7501                        <span aria-hidden="true" class="tw-icon sprite-venmo-white tw-text-[120px] tw-object-top tw-overflow-hidden tw-height-[100px] tw--mt-8"></span>                    </div>
7502                </div>
7503            </button>
7504                    
7505        
7506                    <div
7507                class="paypal-button tw-min-h-[50px] tw-w-full" 
7508                type="button">
7509                
7510                <div x-data="DataLayer" x-load="visible" x-init="viewThirdPartyPayment">
7511                    <input type="hidden" x-ref="paymentRef" value="paypal">
7512                </div>
7513            </div>
7514        
7515                    </fieldset>
7516          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-6 tw-py-2 tw-text-sm tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
7517                    <span aria-hidden="true" class="tw-icon sprite-credit-card-mask tw-bg-clarity-white"></span>                Credit Card
7518                    <span class="loader"></span>
7519            </button>
7520      </div>
7521</form>
7522            <form
7523  @submit.prevent="nextStep"
7524  x-show="isCurrentStep"
7525  data-step=3
7526  data-name="billing"
7527  data-title="Your Info"
7528  :data-current-step="isCurrentStep"
7529  class="tw-h-full"
7530  
7531>
7532  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
7533    <div data-match-amount="0" data-match-frequency="monthly" data-messages="{&quot;frequency&quot;:&quot;
7533A FREE gift will be sent to supporters who choose to give a monthly gift. &quot;,&quot;matched&quot;:{&quot;monthly&quot;:&quot;We&#039;ll send you a free gift with your monthly donation!&quot;},&quot;value&quot;:&quot;Increase your monthly donation to $20\/month to receive a FREE gift. &quot;}" data-secondary-premium="false" data-premium-has-variants="false" class="theme--clarity-white tw-my-6" x-ref="premium" data-premium-display x-show="showPremium" x-cloak">
7534        <div class="donation-premium__panel tw-border-[3px] tw-border-solid tw-flex tw-gap-x-3 tw-items-center tw-p-3 tw-relative tw-transition" x-bind:data-state="premiumState">
7535                            <div class="" data-premium-lightbox>
7536                    <div x-data="LightboxImage" x-load data-gallery='false'>
7537  <figure class="tw-w-20 tw-relative tw-aspect-square tw-flex-[0_0_auto]" id="donation-premium-6abe1b4649fde-lightbox">
7538    <img alt="Cultivate a Kinder World Hat" class="tw-block tw-w-full tw-h-auto tw-object-cover" src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png" x-ref="thumbnail" />
7539    <button class="tw-absolute tw-aspect-square tw-bg-rich-orange tw-bottom-0 tw-flex tw-items-center tw-justify-center tw-right-0 tw-rounded-full tw-size-6 tw-text-white tw-translate-x-1 tw-translate-y-1" type="button" x-on:click="open">
7540      <span class="tw-sr-only">Enlarge image</span>
7541      <span aria-hidden="true" class="tw-icon sprite-magnifying-glass-plus-mask tw-bg-white tw-text-sm"></span>    </button>
7542  </figure>
7543
7544  <dialog
7545    x-ref="dialog"
7546    class="tw-p-0 tw-bg-transparent backdrop:tw-bg-black backdrop:tw-bg-opacity-80"
7547    x-trap.noscroll="dialogOpen"
7548  >
7549          <figure class="tw-relative tw-flex tw-flex-col tw-w-11/12 tw-max-w-4xl tw-max-h-[90vh] tw-overflow-visible tw-px-12 md:tw-px-16">
7550        
7551        <div x-ref="mainImageFrame" class="tw-relative tw-flex-1 tw-min-h-0 tw-overflow-hidden tw-rounded-lg tw-bg-white">
7552
7553          
7554          <img
7555            x-ref="mainImage"
7556            loading="lazy"
7557            alt="Cultivate a Kinder World Hat"
7558            class="tw-block tw-w-full tw-h-auto tw-object-contain tw-max-h-[calc(90vh-8rem)] md:tw-max-h-[calc(90vh-6rem)]"
7559            src="https://media-refresh.heifer.org/wp-content/uploads/Cultivate-a-Kinder-World-Hat-scaled.png"
7560          />
7561
7562          
7563          <button
7564            class="tw-absolute tw-bottom-full tw-right-2 tw-mb-2 md:tw-top-4 md:tw-right-4 md:tw-bottom-auto md:tw-mb-0 tw-absolute tw-top-4 tw-right-4 tw-z-10 tw-bg-white tw-rounded-full tw-size-11 tw-flex tw-items-center tw-justify-center"
7565            type="button"
7566            x-on:click="close"
7567          >
7568            <span class="tw-sr-only">Close dialog</span>
7569            <span aria-hidden="true" class="tw-icon sprite-close-no-circle-mask tw-bg-soil-brown tw-text-lg"></span>          </button>
7570
7571        </div>
7572
7573        
7574        
7575        <button
7576          x-show="hasMultiple"
7577          class="tw-hidden md:tw-block tw-absolute md:tw-left-2 lg:tw-left-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7578          type="button"
7579          x-on:click="prev"
7580        >
7581          <span class="tw-sr-only">Previous image</span>
7582          <span aria-hidden="true" class="tw-icon sprite-arrow-left-mask tw-bg-white tw-text-lg"></span>        </button>
7583
7584        
7585        <button
7586          x-show="hasMultiple"
7587          class="tw-hidden md:tw-block tw-absolute md:tw-right-2 lg:tw-right-0 tw-top-[45%] tw-bg-active-blue tw-text-white tw-px-3 tw-py-4 tw-z-10 tw-shadow-lg"
7588          type="button"
7589          x-on:click="next"
7590        >
7591          <span class="tw-sr-only">Next image</span>
7592          <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-white tw-text-lg"></span>        </button>
7593
7594      </figure>
7595      </dialog>
7596</div>                </div>
7597                        <p class="tw-text-sm" x-ref="premium-message" x-html="premiumMessage">
7598                A FREE gift will be sent to supporters who choose to give a monthly gift. 
7599            </p>
7600            <div aria-hidden class="donation-premium__panel-icon tw-absolute tw-bg-active-blue tw-bottom-0 tw-flex tw-flex-[0_0_auto] tw-items-center tw-justify-center tw-opacity-0 tw-right-0 tw-self-end tw-size-7 tw-transition-opacity md:tw-relative md:tw-rounded-full">
7601                <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white tw-text-lg"></span>            </div>
7602        </div>
7603                            </div>
7604                <fieldset class="form__fieldset">
7605    <legend>Your Information</legend>
7606    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="firstName-6abe1b4648ab6">
7607  <label class="form__label" for="firstName-6abe1b4648ab6" 
7608  >
7609    First Name<span x-show="required">*</span>
7610  </label>
7611  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="given-name" id="firstName-6abe1b4648ab6" name="firstName" placeholder="" required="required" />
7612
7613<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7614  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="firstName-6abe1b4648ab6--error" x-text="errorText"></div>
7615  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="lastName-6abe1b4648ab6">
7616  <label class="form__label" for="lastName-6abe1b4648ab6" 
7617  >
7618    Last Name<span x-show="required">*</span>
7619  </label>
7620  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="family-name" id="lastName-6abe1b4648ab6" name="lastName" placeholder="" required="required" />
7621
7622<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7623  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="lastName-6abe1b4648ab6--error" x-text="errorText"></div>
7624  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="email-6abe1b4648ab6">
7625  <label class="form__label" for="email-6abe1b4648ab6" 
7626  >
7627    Email<span x-show="required">*</span>
7628  </label>
7629  <input class="form__element" type="email" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="email" id="email-6abe1b4648ab6" name="email" placeholder="Ex: [email protected]" required="required" />
7630
7631<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7632  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="email-6abe1b4648ab6--error" x-text="errorText"></div>
7633  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="phone-6abe1b4648ab6">
7634  <label class="form__label" for="phone-6abe1b4648ab6" 
7635  >
7636    Phone (Optional)<span x-show="required">*</span>
7637  </label>
7638  <input class="form__element" type="phone" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="tel" id="phone-6abe1b4648ab6" name="phone" placeholder="Ex: 123-456-7890" />
7639
7640<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
7640d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7641  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="phone-6abe1b4648ab6--error" x-text="errorText"></div>
7642  </div>    
7643    <label for="phone-opt-in-6abe1b4648ab6">
7644        <div class="tw-mt-4">
7645            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
7646    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="checkbox" x-ref="element" name="phone_opt_in" id="phone-opt-in-6abe1b4648ab6">
7647    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo tw-mb-auto tw-mt-1 tw-border-2 tw-size-4">
7648        <span aria-hidden="true" class="tw-icon sprite-check-large-mask tw-bg-clarity-white"></span>    </div>
7649    <label for="phone-opt-in-6abe1b4648ab6" class="tw-ml-2 tw-text-sm">
7650        <span class="wysiwyg">
7651                By providing your mobile phone number you agree that Heifer may contact you by phone and/or text message regarding Heifer news and updates. You can opt-out at any time. See 
7652                <a href="/privacy-policy" target="_blank" class="tw-relative tw-z-10">privacy policy</a>
7653                for details.        
7654            </span>
7655    </label>
7656    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="phone-opt-in-6abe1b4648ab6--error" x-text="errorText"></div>
7657</div>        </div>
7658    </label>
7659</fieldset>                <fieldset class="form__fieldset">
7660    <legend x-show="isNotFree">Billing Information</legend>
7661    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address1-6abe1b4648ab6">
7662  <label class="form__label" for="address1-6abe1b4648ab6" 
7663  >
7664    Address 1<span x-show="required">*</span>
7665  </label>
7666  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="address1-6abe1b4648ab6" name="address1" placeholder="Address 1" required="required" />
7667
7668<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7669  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address1-6abe1b4648ab6--error" x-text="errorText"></div>
7670  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="address2-6abe1b4648ab6">
7671  <label class="form__label" for="address2-6abe1b4648ab6" 
7672  >
7673    Address 2<span x-show="required">*</span>
7674  </label>
7675  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="address2-6abe1b4648ab6" name="address2" placeholder="Address 2" />
7676
7677<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7678  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="address2-6abe1b4648ab6--error" x-text="errorText"></div>
7679  </div>    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="city-6abe1b4648ab6">
7680  <label class="form__label" for="city-6abe1b4648ab6" 
7681  >
7682    City<span x-show="required">*</span>
7683  </label>
7684  <input class="form__element" type="city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="city-6abe1b4648ab6" name="city" placeholder="City" required="required" />
7685
7686<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
7686d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7687  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="city-6abe1b4648ab6--error" x-text="errorText"></div>
7688  </div>    <div x-data="StateSelect" x-load data-target="state">
7689      <template x-if="showAU">
7690      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-AU-6abe1b4648ab6">
7691  <label class="form__label" for="state-AU-6abe1b4648ab6" 
7692  >
7693    State<span x-show="required">*</span>
7694  </label>
7695  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-AU-6abe1b4648ab6" name="state" required="required">
7696      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
7697      <option label="New South Wales" value="NSW" >New South Wales</option>
7698      <option label="Northern Territory" value="NT" >Northern Territory</option>
7699      <option label="Queensland" value="QLD" >Queensland</option>
7700      <option label="South Australia" value="SA" >South Australia</option>
7701      <option label="Tasmania" value="TAS" >Tasmania</option>
7702      <option label="Victoria" value="VIC" >Victoria</option>
7703      <option label="Western Australia" value="WA" >Western Australia</option>
7704  </select>
7705  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-AU-6abe1b4648ab6--error" x-text="errorText"></div>
7706  </div>    </template>
7707      <template x-if="showCA">
7708      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-CA-6abe1b4648ab6">
7709  <label class="form__label" for="state-CA-6abe1b4648ab6" 
7710  >
7711    Province<span x-show="required">*</span>
7712  </label>
7713  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-CA-6abe1b4648ab6" name="state" required="required">
7714      <option label="Alberta" value="AB" >Alberta</option>
7715      <option label="British Columbia" value="BC" >British Columbia</option>
7716      <option label="Manitoba" value="MB" >Manitoba</option>
7717      <option label="New Brunswick" value="NB" >New Brunswick</option>
7718      <option label="Newfoundland" value="NF" >Newfoundland</option>
7719      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
7720      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
7721      <option label="Nunavut" value="NU" >Nunavut</option>
7722      <option label="Ontario" value="ON" >Ontario</option>
7723      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
7724      <option label="Quebec" value="QC" >Quebec</option>
7725      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
7726      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
7727  </select>
7728  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-CA-6abe1b4648ab6--error" x-text="errorText"></div>
7729  </div>    </template>
7730      <template x-if="showUS">
7731      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-US-6abe1b4648ab6">
7732  <label class="form__label" for="state-US-6abe1b4648ab6" 
7733  >
7734    State<span x-show="required">*</span>
7735  </label>
7736  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-US-6abe1b4648ab6" name="state" required="required">
7737      <option label="Alabama" value="AL" >Alabama</option>
7738      <option label="Alaska" value="AK" >Alaska</option>
7739      <option label="Arizona" value="AZ" >Arizona</option>
7740      <option label="Arkansas" value="AR" >Arkansas</option>
7741      <option label="California" value="CA" >California</option>
7742      <option label="Colorado" value="CO" >Colorado</option>
7743      <option label="Connecticut" value="CT" >Connecticut</option>
7744      <option label="Delaware" value="DE" >Delaware</option>
7745      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
7746      <option label="Florida" value="FL" >Florida</option>
7747      <option label="Georgia" value="GA" >Georgia</option>
7748      <option label="Hawaii" value="HI" >Hawaii</option>
7749      <option label="Idaho" value="ID" >Idaho</option>
7750      <option label="Illinois" value="IL" >Illinois</option>
7751      <option label="Indiana" value="IN" >Indiana</option>
7752      <option label="Iowa" value="IA" >Iowa</option>
7753      <option label="Kansas" value="KS" >Kansas</option>
7754      <option label="Kentucky" value="KY" >Kentucky</option>
7755      <option label="Louisiana" value="LA" >Louisiana</option>
7756      <option label="Maine" value="ME" >Maine</option>
7757      <option label="Maryland" value="MD" >Maryland</option>
7758      <option label="Massachusetts" value="MA" >Massachusetts</option>
7759      <option label="Michigan" value="MI" >Michigan</option>
7760      <option label="Minnesota" value="MN" >Minnesota</option>
7761      <option label="Mississippi" value="MS" >Mississippi</option>
7762      <option label="Missouri" value="MO" >Missouri</option>
7763      <option label="Montana" value="MT" >Montana</option>
7764      <option label="Nebraska" value="NE" >Nebraska</option>
7765      <option label="Nevada" value="NV" >Nevada</option>
7766      <option label="New Hampshire" value="NH" >New Hampshire</option>
7767      <option label="New Jersey" value="NJ" >New Jersey</option>
7768      <option label="New Mexico" value="NM" >New Mexico</option>
7769      <option label="New York" value="NY" >New York</option>
7770      <option label="North Carolina" value="NC" >North Carolina</option>
7771      <option label="North Dakota" value="ND" >North Dakota</option>
7772      <option label="Ohio" value="OH" >Ohio</option>
7773      <option label="Oklahoma" value="OK" >Oklahoma</option>
7774      <option label="Oregon" value="OR" >Oregon</option>
7775      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
7776      <option label="Rhode Island" value="RI" >Rhode Island</option>
7777      <option label="South Carolina" value="SC" >South Carolina</option>
7778      <option label="South Dakota" value="SD" >South Dakota</option>
7779      <option label="Tennessee" value="TN" >Tennessee</option>
7780      <option label="Texas" value="TX" >Texas</option>
7781      <option label="Utah" value="UT" >Utah</option>
7782      <option label="Vermont" value="VT" >Vermont</option>
7783      <option label="Virginia" value="VA" >Virginia</option>
7784      <option label="Washington" value="WA" >Washington</option>
7785      <option label="West Virginia" value="WV" >West Virginia</option>
7786      <option label="Wisconsin" value="WI" >Wisconsin</option>
7787      <option label="Wyoming" value="WY" >Wyoming</option>
7788  </select>
7789  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-US-6abe1b4648ab6--error" x-text="errorText"></div>
7790  </div>    </template>
7791    <template x-if="showOther">
7792    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b4648ab6">
7793  <label class="form__label" for="state-other-US-6abe1b4648ab6" 
7794  >
7795    State/Province<span x-show="required">*</span>
7796  </label>
7797  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b4648ab6" name="state" placeholder="State/Province" selectedOption="" required="required" />
7798
7799<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
7799d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7800  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b4648ab6--error" x-text="errorText"></div>
7801  </div>  </template>
7802</div>
7803    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="zipcode-6abe1b4648ab6">
7804  <label class="form__label" for="zipcode-6abe1b4648ab6" 
7805  >
7806    Zip<span x-show="required">*</span>
7807  </label>
7808  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="zipcode-6abe1b4648ab6" name="zipcode" autocomplete="postal-code" autocorrect="off" required="required" />
7809
7810<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
7811  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="zipcode-6abe1b4648ab6--error" x-text="errorText"></div>
7812  </div>    <div x-data="CountrySelect" x-load data-trigger="state">
7813    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="country-6abe1b4648ab6">
7814  <label class="form__label" for="country-6abe1b4648ab6" 
7815  >
7816    Country<span x-show="required">*</span>
7817  </label>
7818  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="country-6abe1b4648ab6" name="country" required="required">
7819      <option label="United States" value="US" >United States</option>
7820      <option label="Afghanistan" value="AF" >Afghanistan</option>
7821      <option label="Åland Islands" value="AX" >Åland Islands</option>
7822      <option label="Albania" value="AL" >Albania</option>
7823      <option label="Algeria" value="DZ" >Algeria</option>
7824      <option label="American Samoa" value="AS" >American Samoa</option>
7825      <option label="Andorra" value="AD" >Andorra</option>
7826      <option label="Angola" value="AO" >Angola</option>
7827      <option label="Anguilla" value="AI" >Anguilla</option>
7828      <option label="Antarctica" value="AQ" >Antarctica</option>
7829      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
7830      <option label="Argentina" value="AR" >Argentina</option>
7831      <option label="Armenia" value="AM" >Armenia</option>
7832      <option label="Aruba" value="AW" >Aruba</option>
7833      <option label="Australia" value="AU" >Australia</option>
7834      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
7835      <option label="Bahamas" value="BS" >Bahamas</option>
7836      <option label="Bahrain" value="BH" >Bahrain</option>
7837      <option label="Bangladesh" value="BD" >Bangladesh</option>
7838      <option label="Barbados" value="BB" >Barbados</option>
7839      <option label="Belarus" value="BY" >Belarus</option>
7840      <option label="Belize" value="BZ" >Belize</option>
7841      <option label="Benin" value="BJ" >Benin</option>
7842      <option label="Bermuda" value="BM" >Bermuda</option>
7843      <option label="Bhutan" value="BT" >Bhutan</option>
7844      <option label="Bolivia" value="BO" >Bolivia</option>
7845      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
7846      <option label="Botswana" value="BW" >Botswana</option>
7847      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
7848      <option label="Brazil" value="BR" >Brazil</option>
7849      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
7850      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
7851      <option label="Brunei" value="BN" >Brunei</option>
7852      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
7853      <option label="Burundi" value="BI" >Burundi</option>
7854      <option label="Cambodia" value="KH" >Cambodia</option>
7855      <option label="Cameroon" value="CM" >Cameroon</option>
7856      <option label="Canada" value="CA" >Canada</option>
7857      <option label="Cape Verde" value="CV" >Cape Verde</option>
7858      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
7859      <option label="Central African Republic" value="CF" >Central African Republic</option>
7860      <option label="Chad" value="TD" >Chad</option>
7861      <option label="Chile" value="CL" >Chile</option>
7862      <option label="Christmas Island" value="CX" >Christmas Island</option>
7863      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
7864      <option label="Colombia" value="CO" >Colombia</option>
7865      <option label="Comoros" value="KM" >Comoros</option>
7866      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
7867      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
7868      <option label="Cook Islands" value="CK" >Cook Islands</option>
7869      <option label="Costa Rica" value="CR" >Costa Rica</option>
7870      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
7871      <option label="Djibouti" value="DJ" >Djibouti</option>
7872      <option label="Dominica" value="DM" >Dominica</option>
7873      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
7874      <option label="Ecuador" value="EC" >Ecuador</option>
7875      <option label="Egypt" value="EG" >Egypt</option>
7876      <option label="El Salvador" value="SV" >El Salvador</option>
7877      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
7878      <option label="Eritrea" value="ER" >Eritrea</option>
7879      <option label="Ethiopia" value="ET" >Ethiopia</option>
7880      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
7881      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
7882      <option label="Fiji" value="FJ" >Fiji</option>
7883      <option label="French Guiana" value="GF" >French Guiana</option>
7884      <option label="French Polynesia" value="PF" >French Polynesia</option>
7885      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
7886      <option label="Gabon" value="GA" >Gabon</option>
7887      <option label="Gambia" value="GM" >Gambia</option>
7888      <option label="Georgia" value="GE" >Georgia</option>
7889      <option label="Ghana" value="GH" >Ghana</option>
7890      <option label="Gibraltar" value="GI" >Gibraltar</option>
7891      <option label="Greenland" value="GL" >Greenland</option>
7892      <option label="Grenada" value="GD" >Grenada</option>
7893      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
7894      <option label="Guam" value="GU" >Guam</option>
7895      <option label="Guatemala" value="GT" >Guatemala</option>
7896      <option label="Guernsey" value="GG" >Guernsey</option>
7897      <option label="Guinea" value="GN" >Guinea</option>
7898      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
7899      <option label="Guyana" value="GY" >Guyana</option>
7900      <option label="Haiti" value="HT" >Haiti</option>
7901      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
7902      <option label="Honduras" value="HN" >Honduras</option>
7903      <option label="India" value="IN" >India</option>
7904      <option label="Indonesia" value="ID" >Indonesia</option>
7905      <option label="Iraq" value="IQ" >Iraq</option>
7906      <option label="Isle of Man" value="IM" >Isle of Man</option>
7907      <option label="Israel" value="IL" >Israel</option>
7908      <option label="Jamaica" value="JM" >Jamaica</option>
7909      <option label="Japan" value="JP" >Japan</option>
7910      <option label="Jersey" value="JE" >Jersey</option>
7911      <option label="Jordan" value="JO" >Jordan</option>
7912      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
7913      <option label="Kenya" value="KE" >Kenya</option>
7914      <option label="Kiribati" value="KI" >Kiribati</option>
7915      <option label="Kuwait" value="KW" >Kuwait</option>
7916      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
7917      <option label="Laos" value="LA" >Laos</option>
7918      <option label="Lebanon" value="LB" >Lebanon</option>
7919      <option label="Lesotho" value="LS" >Lesotho</option>
7920      <option label="Liberia" value="LR" >Liberia</option>
7921      <option label="Libya" value="LY" >Libya</option>
7922      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
7923      <option label="Macedonia" value="MK" >Macedonia</option>
7924      <option label="Madagascar" value="MG" >Madagascar</option>
7925      <option label="Malawi" value="MW" >Malawi</option>
7926      <option label="Malaysia" value="MY" >Malaysia</option>
7927      <option label="Maldives" value="MV" >Maldives</option>
7928      <option label="Mali" value="ML" >Mali</option>
7929      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
7930      <option label="Martinique" value="MQ" >Martinique</option>
7931      <option label="Mauritania" value="MR" >Mauritania</option>
7932      <option label="Mauritius" value="MU" >Mauritius</option>
7933      <option label="Mayotte" value="YT" >Mayotte</option>
7934      <option label="Mexico" value="MX" >Mexico</option>
7935      <option label="Micronesia" value="FM" >Micronesia</option>
7936      <option label="Moldova" value="MD" >Moldova</option>
7937      <option label="Monaco" value="MC" >Monaco</option>
7938      <option label="Mongolia" value="MN" >Mongolia</option>
7939      <option label="Montenegro" value="ME" >Montenegro</option>
7940      <option label="Montserrat" value="MS" >Montserrat</option>
7941      <option label="Morocco" value="MA" >Morocco</option>
7942      <option label="Mozambique" value="MZ" >Mozambique</option>
7943      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
7944      <option label="Namibia" value="NA" >Namibia</option>
7945      <option label="Nauru" value="NR" >Nauru</option>
7946      <option label="Nepal" value="NP" >Nepal</option>
7947      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
7948      <option label="New Caledonia" value="NC" >New Caledonia</option>
7949      <option label="New Zealand" value="NZ" >New Zealand</option>
7950      <option label="Nicaragua" value="NI" >Nicaragua</option>
7951      <option label="Niger" value="NE" >Niger</option>
7952      <option label="Nigeria" value="NG" >Nigeria</option>
7953      <option label="Niue" value="NU" >Niue</option>
7954      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
7955      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
7956      <option label="Oman" value="OM" >Oman</option>
7957      <option label="Pakistan" value="PK" >Pakistan</option>
7958      <option label="Palau" value="PW" >Palau</option>
7959      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
7960      <option label="Panama" value="PA" >Panama</option>
7961      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
7962      <option label="Paraguay" value="PY" >Paraguay</option>
7963      <option label="Peru" value="PE" >Peru</option>
7964      <option label="Philippines" value="PH" >Philippines</option>
7965      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
7966      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
7967      <option label="Qatar" value="QA" >Qatar</option>
7968      <option label="Réunion" value="RE" >Réunion</option>
7969      <option label="Rwanda" value="RW" >Rwanda</option>
7970      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
7971      <option label="Saint Helena" value="SH" >Saint Helena</option>
7972      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
7973      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
7974      <option label="Saint Martin" value="MF" >Saint Martin</option>
7975      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
7976      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
7977      <option label="Samoa" value="WS" >Samoa</option>
7978      <option label="San Marino" value="SM" >San Marino</option>
7979      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
7980      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
7981      <option label="Senegal" value="SN" >Senegal</option>
7982      <option label="Serbia" value="RS" >Serbia</option>
7983      <option label="Seychelles" value="SC" >Seychelles</option>
7984      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
7985      <option label="Singapore" value="SG" >Singapore</option>
7986      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
7987      <option label="Somalia" value="SO" >Somalia</option>
7988      <option label="South Africa" value="ZA" >South Africa</option>
7989      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
7990      <option label="South Korea" value="KR" >South Korea</option>
7991      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
7992      <option label="Sudan" value="SD" >Sudan</option>
7993      <option label="Suriname" value="SR" >Suriname</option>
7994      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
7995      <option label="Swaziland" value="SZ" >Swaziland</option>
7996      <option label="Switzerland" value="CH" >Switzerland</option>
7997      <option label="Taiwan" value="TW" >Taiwan</option>
7998      <option label="Tajikistan" value="TJ" >Tajikistan</option>
7999      <option label="Tanzania" value="TZ" >Tanzania</option>
8000      <option label="Thailand" value="TH" >Thailand</option>
8001      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
8002      <option label="Togo" value="TG" >Togo</option>
8003      <option label="Tokelau" value="TK" >Tokelau</option>
8004      <option label="Tonga" value="TO" >Tonga</option>
8005      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
8006      <option label="Tunisia" value="TN" >Tunisia</option>
8007      <option label="Turkey" value="TR" >Turkey</option>
8008      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
8009      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
8010      <option label="Tuvalu" value="TV" >Tuvalu</option>
8011      <option label="Uganda" value="UG" >Uganda</option>
8012      <option label="Ukraine" value="UA" >Ukraine</option>
8013      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
8014      <option label="Uruguay" value="UY" >Uruguay</option>
8015      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
8016      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
8017      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
8018      <option label="Vanuatu" value="VU" >Vanuatu</option>
8019      <option label="Vatican City" value="VA" >Vatican City</option>
8020      <option label="Vietnam" value="VN" >Vietnam</option>
8021      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
8022      <option label="Western Sahara" value="EH" >Western Sahara</option>
8023      <option label="Yemen" value="YE" >Yemen</option>
8024      <option label="Zambia" value="ZM" >Zambia</option>
8025      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
8026  </select>
8027  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="country-6abe1b4648ab6--error" x-text="errorText"></div>
8028  </div></div>            
8029        <div x-data="DataLayer" x-load="visible" x-init="addShippingInfo">
8030            <input type="hidden" x-ref="productData" :value="productData">
8031        </div>  
8032    </fieldset>                <div x-data="FormFieldsToggle" x-load>
8033    <fieldset class="tw-text-xs tw-mt-7">
8034        <legend class="tw-text-base">I am donating today:</legend>
8035        <div class="tw-gap-4 tw-grid tw-mt-3 sm:tw-grid-cols-2">
8036            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
8037    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="individual" name="buying_on_behalf" id="buying_on_behalf_individual-6abe1b4648ab6" checked="checked" @click="hideOnChecked" />
8038    <div aria-hidden class="tw-aspect-square tw-flex tw-
8038items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
8039    <label class="tw-ml-3" for="buying_on_behalf_individual-6abe1b4648ab6">
8040        As an individual
8041    </label>
8042    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_individual-6abe1b4648ab6--error" x-text="errorText"></div>
8043    </div>            <div class="tw-flex tw-items-center tw-relative" x-data="FormElement" x-load>
8044    <input class="tw-absolute tw-block tw-cursor-pointer tw-inset-0 tw-opacity-0 tw-rounded-none tw-size-full tw-z-10 tw-peer/checkbox-psuedo" type="radio" x-ref="element" value="organization" name="buying_on_behalf" id="buying_on_behalf_organization-6abe1b4648ab6" @click="showOnChecked" />
8045    <div aria-hidden class="tw-aspect-square tw-flex tw-items-center tw-justify-center form__psuedo  tw-border-2 tw-border-clarity-white tw-relative tw-rounded-full tw-size-3 peer-checked/checkbox-psuedo:tw-bg-[var(--button-primary-border-hover)] peer-checked/checkbox-psuedo:tw-outline-[var(--button-primary-border-hover)]"></div>
8046    <label class="tw-ml-3" for="buying_on_behalf_organization-6abe1b4648ab6">
8047        On behalf of a group or organization
8048    </label>
8049    <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error tw-text-alert-red tw-hierarchy-petite" id="buying_on_behalf_organization-6abe1b4648ab6--error" x-text="errorText"></div>
8050    </div>        </div>
8051    </fieldset>
8052    <template x-if="active">
8053        <fieldset class="form__fieldset">
8054            <legend>Tell us about your group or organization</legend>
8055            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_name_6abe1b4648ab6">
8056  <label class="form__label" for="buying_on_behalf_name_6abe1b4648ab6" 
8057  >
8058    Organization Name<span x-show="required">*</span>
8059  </label>
8060  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_name_6abe1b4648ab6" name="buying_on_behalf_name" placeholder="Organization Name" required="required" />
8061
8062<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8063  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_name_6abe1b4648ab6--error" x-text="errorText"></div>
8064  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_type_6abe1b4648ab6">
8065  <label class="form__label" for="buying_on_behalf_type_6abe1b4648ab6" 
8066  >
8067    Select Organization Type<span x-show="required">*</span>
8068  </label>
8069  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_type_6abe1b4648ab6" name="buying_on_behalf_type">
8070      <option label="Select Organization Type" value="" selected>Select Organization Type</option>
8071      <option label="Civic Group" value="civic_group" >Civic Group</option>
8072      <option label="Congregation/Faith Group" value="congregation" >Congregation/Faith Group</option>
8073      <option label="Corporation" value="corporation" >Corporation</option>
8074      <option label="Family Group" value="family_group" >Family Group</option>
8075      <option label="Foundation" value="foundation" >Foundation</option>
8076      <option label="School" value="school" >School</option>
8077      <option label="Other" value="other" >Other</option>
8078  </select>
8079  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_type_6abe1b4648ab6--error" x-text="errorText"></div>
8080  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_1_6abe1b4648ab6">
8081  <label class="form__label" for="buying_on_behalf_address_1_6abe1b4648ab6" 
8082  >
8083    Organization Address<span x-show="required">*</span>
8084  </label>
8085  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line1" id="buying_on_behalf_address_1_6abe1b4648ab6" name="buying_on_behalf_address_1" placeholder="Address 1" required="required" />
8086
8087<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
8087d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8088  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_1_6abe1b4648ab6--error" x-text="errorText"></div>
8089  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_address_2_6abe1b4648ab6">
8090  <label class="form__label" for="buying_on_behalf_address_2_6abe1b4648ab6" 
8091  >
8092    Organization Address Line 2<span x-show="required">*</span>
8093  </label>
8094  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-line2" id="buying_on_behalf_address_2_6abe1b4648ab6" name="buying_on_behalf_address_2" placeholder="Organization Address Line 2" />
8095
8096<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8097  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_address_2_6abe1b4648ab6--error" x-text="errorText"></div>
8098  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_city_6abe1b4648ab6">
8099  <label class="form__label" for="buying_on_behalf_city_6abe1b4648ab6" 
8100  >
8101    City<span x-show="required">*</span>
8102  </label>
8103  <input class="form__element" type="buying_on_behalf_city" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level2" id="buying_on_behalf_city_6abe1b4648ab6" name="buying_on_behalf_city" placeholder="City" required="required" />
8104
8105<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8106  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_city_6abe1b4648ab6--error" x-text="errorText"></div>
8107  </div>            <div x-data="StateSelect" x-load data-target="buying_on_behalf_state">
8108      <template x-if="showAU">
8109      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-AU-6abe1b4648ab6">
8110  <label class="form__label" for="buying_on_behalf_state-AU-6abe1b4648ab6" 
8111  >
8112    State<span x-show="required">*</span>
8113  </label>
8114  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-AU-6abe1b4648ab6" name="buying_on_behalf_state" required="required">
8115      <option label="Australian Capital Territory" value="ACT" >Australian Capital Territory</option>
8116      <option label="New South Wales" value="NSW" >New South Wales</option>
8117      <option label="Northern Territory" value="NT" >Northern Territory</option>
8118      <option label="Queensland" value="QLD" >Queensland</option>
8119      <option label="South Australia" value="SA" >South Australia</option>
8120      <option label="Tasmania" value="TAS" >Tasmania</option>
8121      <option label="Victoria" value="VIC" >Victoria</option>
8122      <option label="Western Australia" value="WA" >Western Australia</option>
8123  </select>
8124  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-AU-6abe1b4648ab6--error" x-text="errorText"></div>
8125  </div>    </template>
8126      <template x-if="showCA">
8127      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-CA-6abe1b4648ab6">
8128  <label class="form__label" for="buying_on_behalf_state-CA-6abe1b4648ab6" 
8129  >
8130    Province<span x-show="required">*</span>
8131  </label>
8132  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-CA-6abe1b4648ab6" name="buying_on_behalf_state" required="required">
8133      <option label="Alberta" value="AB" >Alberta</option>
8134      <option label="British Columbia" value="BC" >British Columbia</option>
8135      <option label="Manitoba" value="MB" >Manitoba</option>
8136      <option label="New Brunswick" value="NB" >New Brunswick</option>
8137      <option label="Newfoundland" value="NF" >Newfoundland</option>
8138      <option label="Northwest Territories" value="NT" >Northwest Territories</option>
8139      <option label="Nova Scotia" value="NS" >Nova Scotia</option>
8140      <option label="Nunavut" value="NU" >Nunavut</option>
8141      <option label="Ontario" value="ON" >Ontario</option>
8142      <option label="Prince Edward Island" value="PE" >Prince Edward Island</option>
8143      <option label="Quebec" value="QC" >Quebec</option>
8144      <option label="Saskatchewan" value="SK" >Saskatchewan</option>
8145      <option label="Yukon Territory" value="TY" >Yukon Territory</option>
8146  </select>
8147  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-CA-6abe1b4648ab6--error" x-text="errorText"></div>
8148  </div>    </template>
8149      <template x-if="showUS">
8150      <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_state-US-6abe1b4648ab6">
8151  <label class="form__label" for="buying_on_behalf_state-US-6abe1b4648ab6" 
8152  >
8153    State<span x-show="required">*</span>
8154  </label>
8155  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="buying_on_behalf_state-US-6abe1b4648ab6" name="buying_on_behalf_state" required="required">
8156      <option label="Alabama" value="AL" >Alabama</option>
8157      <option label="Alaska" value="AK" >Alaska</option>
8158      <option label="Arizona" value="AZ" >Arizona</option>
8159      <option label="Arkansas" value="AR" >Arkansas</option>
8160      <option label="California" value="CA" >California</option>
8161      <option label="Colorado" value="CO" >Colorado</option>
8162      <option label="Connecticut" value="CT" >Connecticut</option>
8163      <option label="Delaware" value="DE" >Delaware</option>
8164      <option label="District Of Columbia" value="DC" >District Of Columbia</option>
8165      <option label="Florida" value="FL" >Florida</option>
8166      <option label="Georgia" value="GA" >Georgia</option>
8167      <option label="Hawaii" value="HI" >Hawaii</option>
8168      <option label="Idaho" value="ID" >Idaho</option>
8169      <option label="Illinois" value="IL" >Illinois</option>
8170      <option label="Indiana" value="IN" >Indiana</option>
8171      <option label="Iowa" value="IA" >Iowa</option>
8172      <option label="Kansas" value="KS" >Kansas</option>
8173      <option label="Kentucky" value="KY" >Kentucky</option>
8174      <option label="Louisiana" value="LA" >Louisiana</option>
8175      <option label="Maine" value="ME" >Maine</option>
8176      <option label="Maryland" value="MD" >Maryland</option>
8177      <option label="Massachusetts" value="MA" >Massachusetts</option>
8178      <option label="Michigan" value="MI" >Michigan</option>
8179      <option label="Minnesota" value="MN" >Minnesota</option>
8180      <option label="Mississippi" value="MS" >Mississippi</option>
8181      <option label="Missouri" value="MO" >Missouri</option>
8182      <option label="Montana" value="MT" >Montana</option>
8183      <option label="Nebraska" value="NE" >Nebraska</option>
8184      <option label="Nevada" value="NV" >Nevada</option>
8185      <option label="New Hampshire" value="NH" >New Hampshire</option>
8186      <option label="New Jersey" value="NJ" >New Jersey</option>
8187      <option label="New Mexico" value="NM" >New Mexico</option>
8188      <option label="New York" value="NY" >New York</option>
8189      <option label="North Carolina" value="NC" >North Carolina</option>
8190      <option label="North Dakota" value="ND" >North Dakota</option>
8191      <option label="Ohio" value="OH" >Ohio</option>
8192      <option label="Oklahoma" value="OK" >Oklahoma</option>
8193      <option label="Oregon" value="OR" >Oregon</option>
8194      <option label="Pennsylvania" value="PA" >Pennsylvania</option>
8195      <option label="Rhode Island" value="RI" >Rhode Island</option>
8196      <option label="South Carolina" value="SC" >South Carolina</option>
8197      <option label="South Dakota" value="SD" >South Dakota</option>
8198      <option label="Tennessee" value="TN" >Tennessee</option>
8199      <option label="Texas" value="TX" >Texas</option>
8200      <option label="Utah" value="UT" >Utah</option>
8201      <option label="Vermont" value="VT" >Vermont</option>
8202      <option label="Virginia" value="VA" >Virginia</option>
8203      <option label="Washington" value="WA" >Washington</option>
8204      <option label="West Virginia" value="WV" >West Virginia</option>
8205      <option label="Wisconsin" value="WI" >Wisconsin</option>
8206      <option label="Wyoming" value="WY" >Wyoming</option>
8207  </select>
8208  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_state-US-6abe1b4648ab6--error" x-text="errorText"></div>
8209  </div>    </template>
8210    <template x-if="showOther">
8211    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="state-other-US-6abe1b4648ab6">
8212  <label class="form__label" for="state-other-US-6abe1b4648ab6" 
8213  >
8214    State/Province<span x-show="required">*</span>
8215  </label>
8216  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" autocomplete="address-level1" id="state-other-US-6abe1b4648ab6" name="buying_on_behalf_state" placeholder="State/Province" selectedOption="" required="required" />
8217
8218<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invali
8218d tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8219  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="state-other-US-6abe1b4648ab6--error" x-text="errorText"></div>
8220  </div>  </template>
8221</div>
8222            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_zip_6abe1b4648ab6">
8223  <label class="form__label" for="buying_on_behalf_zip_6abe1b4648ab6" 
8224  >
8225    Zip<span x-show="required">*</span>
8226  </label>
8227  <input class="form__element" type="text" x-on:blur="handleBlur" x-on:input="handleChange" x-on:focus="handleFocus" x-ref="element" id="buying_on_behalf_zip_6abe1b4648ab6" name="buying_on_behalf_zip" autocomplete="postal-code" autocorrect="off" required="required" />
8228
8229<span aria-hidden="true" class="tw-icon sprite-check-circle-mask tw-bg-active-blue form_input-icon valid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.valid"></span><span aria-hidden="true" class="tw-icon sprite-alert-mask tw-bg-alert-red form_input-icon invalid tw-flex-shrink-0" x-cloak="x-cloak" x-show="state.invalid"></span>
8230  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_zip_6abe1b4648ab6--error" x-text="errorText"></div>
8231  </div>            <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country_6abe1b4648ab6">
8232  <label class="form__label" for="buying_on_behalf_country_6abe1b4648ab6" 
8233  >
8234    Country<span x-show="required">*</span>
8235  </label>
8236  <div x-data="CountrySelect" x-load data-trigger="state">
8237    <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="buying_on_behalf_country-6abe1b4648ab6">
8238  <label class="form__label" for="buying_on_behalf_country-6abe1b4648ab6" 
8239  >
8240    Country<span x-show="required">*</span>
8241  </label>
8242  <select class="form__element" x-on:blur="handleBlur" x-on:change="handleCountryChange" x-on:focus="handleFocus" x-ref="element" autocomplete="country-name" id="buying_on_behalf_country-6abe1b4648ab6" name="buying_on_behalf_country" required="required">
8243      <option label="United States" value="US" >United States</option>
8244      <option label="Afghanistan" value="AF" >Afghanistan</option>
8245      <option label="Åland Islands" value="AX" >Åland Islands</option>
8246      <option label="Albania" value="AL" >Albania</option>
8247      <option label="Algeria" value="DZ" >Algeria</option>
8248      <option label="American Samoa" value="AS" >American Samoa</option>
8249      <option label="Andorra" value="AD" >Andorra</option>
8250      <option label="Angola" value="AO" >Angola</option>
8251      <option label="Anguilla" value="AI" >Anguilla</option>
8252      <option label="Antarctica" value="AQ" >Antarctica</option>
8253      <option label="Antigua and Barbuda" value="AG" >Antigua and Barbuda</option>
8254      <option label="Argentina" value="AR" >Argentina</option>
8255      <option label="Armenia" value="AM" >Armenia</option>
8256      <option label="Aruba" value="AW" >Aruba</option>
8257      <option label="Australia" value="AU" >Australia</option>
8258      <option label="Azerbaijan" value="AZ" >Azerbaijan</option>
8259      <option label="Bahamas" value="BS" >Bahamas</option>
8260      <option label="Bahrain" value="BH" >Bahrain</option>
8261      <option label="Bangladesh" value="BD" >Bangladesh</option>
8262      <option label="Barbados" value="BB" >Barbados</option>
8263      <option label="Belarus" value="BY" >Belarus</option>
8264      <option label="Belize" value="BZ" >Belize</option>
8265      <option label="Benin" value="BJ" >Benin</option>
8266      <option label="Bermuda" value="BM" >Bermuda</option>
8267      <option label="Bhutan" value="BT" >Bhutan</option>
8268      <option label="Bolivia" value="BO" >Bolivia</option>
8269      <option label="Bosnia and Herzegovina" value="BA" >Bosnia and Herzegovina</option>
8270      <option label="Botswana" value="BW" >Botswana</option>
8271      <option label="Bouvet Island" value="BV" >Bouvet Island</option>
8272      <option label="Brazil" value="BR" >Brazil</option>
8273      <option label="British Indian Ocean Territory" value="IO" >British Indian Ocean Territory</option>
8274      <option label="British Virgin Islands" value="VG" >British Virgin Islands</option>
8275      <option label="Brunei" value="BN" >Brunei</option>
8276      <option label="Burkina Faso" value="BF" >Burkina Faso</option>
8277      <option label="Burundi" value="BI" >Burundi</option>
8278      <option label="Cambodia" value="KH" >Cambodia</option>
8279      <option label="Cameroon" value="CM" >Cameroon</option>
8280      <option label="Canada" value="CA" >Canada</option>
8281      <option label="Cape Verde" value="CV" >Cape Verde</option>
8282      <option label="Cayman Islands" value="KY" >Cayman Islands</option>
8283      <option label="Central African Republic" value="CF" >Central African Republic</option>
8284      <option label="Chad" value="TD" >Chad</option>
8285      <option label="Chile" value="CL" >Chile</option>
8286      <option label="Christmas Island" value="CX" >Christmas Island</option>
8287      <option label="Cocos [Keeling] Islands" value="CC" >Cocos [Keeling] Islands</option>
8288      <option label="Colombia" value="CO" >Colombia</option>
8289      <option label="Comoros" value="KM" >Comoros</option>
8290      <option label="Congo - Brazzaville" value="CG" >Congo - Brazzaville</option>
8291      <option label="Congo - Kinshasa" value="CD" >Congo - Kinshasa</option>
8292      <option label="Cook Islands" value="CK" >Cook Islands</option>
8293      <option label="Costa Rica" value="CR" >Costa Rica</option>
8294      <option label="Côte d’Ivoire" value="CI" >Côte d’Ivoire</option>
8295      <option label="Djibouti" value="DJ" >Djibouti</option>
8296      <option label="Dominica" value="DM" >Dominica</option>
8297      <option label="Dominican Republic" value="DO" >Dominican Republic</option>
8298      <option label="Ecuador" value="EC" >Ecuador</option>
8299      <option label="Egypt" value="EG" >Egypt</option>
8300      <option label="El Salvador" value="SV" >El Salvador</option>
8301      <option label="Equatorial Guinea" value="GQ" >Equatorial Guinea</option>
8302      <option label="Eritrea" value="ER" >Eritrea</option>
8303      <option label="Ethiopia" value="ET" >Ethiopia</option>
8304      <option label="Falkland Islands" value="FK" >Falkland Islands</option>
8305      <option label="Faroe Islands" value="FO" >Faroe Islands</option>
8306      <option label="Fiji" value="FJ" >Fiji</option>
8307      <option label="French Guiana" value="GF" >French Guiana</option>
8308      <option label="French Polynesia" value="PF" >French Polynesia</option>
8309      <option label="French Southern Territories" value="TF" >French Southern Territories</option>
8310      <option label="Gabon" value="GA" >Gabon</option>
8311      <option label="Gambia" value="GM" >Gambia</option>
8312      <option label="Georgia" value="GE" >Georgia</option>
8313      <option label="Ghana" value="GH" >Ghana</option>
8314      <option label="Gibraltar" value="GI" >Gibraltar</option>
8315      <option label="Greenland" value="GL" >Greenland</option>
8316      <option label="Grenada" value="GD" >Grenada</option>
8317      <option label="Guadeloupe" value="GP" >Guadeloupe</option>
8318      <option label="Guam" value="GU" >Guam</option>
8319      <option label="Guatemala" value="GT" >Guatemala</option>
8320      <option label="Guernsey" value="GG" >Guernsey</option>
8321      <option label="Guinea" value="GN" >Guinea</option>
8322      <option label="Guinea-Bissau" value="GW" >Guinea-Bissau</option>
8323      <option label="Guyana" value="GY" >Guyana</option>
8324      <option label="Haiti" value="HT" >Haiti</option>
8325      <option label="Heard Island and McDonald Islands" value="HM" >Heard Island and McDonald Islands</option>
8326      <option label="Honduras" value="HN" >Honduras</option>
8327      <option label="India" value="IN" >India</option>
8328      <option label="Indonesia" value="ID" >Indonesia</option>
8329      <option label="Iraq" value="IQ" >Iraq</option>
8330      <option label="Isle of Man" value="IM" >Isle of Man</option>
8331      <option label="Israel" value="IL" >Israel</option>
8332      <option label="Jamaica" value="JM" >Jamaica</option>
8333      <option label="Japan" value="JP" >Japan</option>
8334      <option label="Jersey" value="JE" >Jersey</option>
8335      <option label="Jordan" value="JO" >Jordan</option>
8336      <option label="Kazakhstan" value="KZ" >Kazakhstan</option>
8337      <option label="Kenya" value="KE" >Kenya</option>
8338      <option label="Kiribati" value="KI" >Kiribati</option>
8339      <option label="Kuwait" value="KW" >Kuwait</option>
8340      <option label="Kyrgyzstan" value="KG" >Kyrgyzstan</option>
8341      <option label="Laos" value="LA" >Laos</option>
8342      <option label="Lebanon" value="LB" >Lebanon</option>
8343      <option label="Lesotho" value="LS" >Lesotho</option>
8344      <option label="Liberia" value="LR" >Liberia</option>
8345      <option label="Libya" value="LY" >Libya</option>
8346      <option label="Macau SAR China" value="MO" >Macau SAR China</option>
8347      <option label="Macedonia" value="MK" >Macedonia</option>
8348      <option label="Madagascar" value="MG" >Madagascar</option>
8349      <option label="Malawi" value="MW" >Malawi</option>
8350      <option label="Malaysia" value="MY" >Malaysia</option>
8351      <option label="Maldives" value="MV" >Maldives</option>
8352      <option label="Mali" value="ML" >Mali</option>
8353      <option label="Marshall Islands" value="MH" >Marshall Islands</option>
8354      <option label="Martinique" value="MQ" >Martinique</option>
8355      <option label="Mauritania" value="MR" >Mauritania</option>
8356      <option label="Mauritius" value="MU" >Mauritius</option>
8357      <option label="Mayotte" value="YT" >Mayotte</option>
8358      <option label="Mexico" value="MX" >Mexico</option>
8359      <option label="Micronesia" value="FM" >Micronesia</option>
8360      <option label="Moldova" value="MD" >Moldova</option>
8361      <option label="Monaco" value="MC" >Monaco</option>
8362      <option label="Mongolia" value="MN" >Mongolia</option>
8363      <option label="Montenegro" value="ME" >Montenegro</option>
8364      <option label="Montserrat" value="MS" >Montserrat</option>
8365      <option label="Morocco" value="MA" >Morocco</option>
8366      <option label="Mozambique" value="MZ" >Mozambique</option>
8367      <option label="Myanmar [Burma]" value="MM" >Myanmar [Burma]</option>
8368      <option label="Namibia" value="NA" >Namibia</option>
8369      <option label="Nauru" value="NR" >Nauru</option>
8370      <option label="Nepal" value="NP" >Nepal</option>
8371      <option label="Netherlands Antilles" value="AN" >Netherlands Antilles</option>
8372      <option label="New Caledonia" value="NC" >New Caledonia</option>
8373      <option label="New Zealand" value="NZ" >New Zealand</option>
8374      <option label="Nicaragua" value="NI" >Nicaragua</option>
8375      <option label="Niger" value="NE" >Niger</option>
8376      <option label="Nigeria" value="NG" >Nigeria</option>
8377      <option label="Niue" value="NU" >Niue</option>
8378      <option label="Norfolk Island" value="NF" >Norfolk Island</option>
8379      <option label="Northern Mariana Islands" value="MP" >Northern Mariana Islands</option>
8380      <option label="Oman" value="OM" >Oman</option>
8381      <option label="Pakistan" value="PK" >Pakistan</option>
8382      <option label="Palau" value="PW" >Palau</option>
8383      <option label="Palestinian Territories" value="PS" >Palestinian Territories</option>
8384      <option label="Panama" value="PA" >Panama</option>
8385      <option label="Papua New Guinea" value="PG" >Papua New Guinea</option>
8386      <option label="Paraguay" value="PY" >Paraguay</option>
8387      <option label="Peru" value="PE" >Peru</option>
8388      <option label="Philippines" value="PH" >Philippines</option>
8389      <option label="Pitcairn Islands" value="PN" >Pitcairn Islands</option>
8390      <option label="Puerto Rico" value="PR" >Puerto Rico</option>
8391      <option label="Qatar" value="QA" >Qatar</option>
8392      <option label="Réunion" value="RE" >Réunion</option>
8393      <option label="Rwanda" value="RW" >Rwanda</option>
8394      <option label="Saint Barthélemy" value="BL" >Saint Barthélemy</option>
8395      <option label="Saint Helena" value="SH" >Saint Helena</option>
8396      <option label="Saint Kitts and Nevis" value="KN" >Saint Kitts and Nevis</option>
8397      <option label="Saint Lucia" value="LC" >Saint Lucia</option>
8398      <option label="Saint Martin" value="MF" >Saint Martin</option>
8399      <option label="Saint Pierre and Miquelon" value="PM" >Saint Pierre and Miquelon</option>
8400      <option label="Saint Vincent and the Grenadines" value="VC" >Saint Vincent and the Grenadines</option>
8401      <option label="Samoa" value="WS" >Samoa</option>
8402      <option label="San Marino" value="SM" >San Marino</option>
8403      <option label="São Tomé and Príncipe" value="ST" >São Tomé and Príncipe</option>
8404      <option label="Saudi Arabia" value="SA" >Saudi Arabia</option>
8405      <option label="Senegal" value="SN" >Senegal</option>
8406      <option label="Serbia" value="RS" >Serbia</option>
8407      <option label="Seychelles" value="SC" >Seychelles</option>
8408      <option label="Sierra Leone" value="SL" >Sierra Leone</option>
8409      <option label="Singapore" value="SG" >Singapore</option>
8410      <option label="Solomon Islands" value="SB" >Solomon Islands</option>
8411      <option label="Somalia" value="SO" >Somalia</option>
8412      <option label="South Africa" value="ZA" >South Africa</option>
8413      <option label="South Georgia and the South Sandwich Islands" value="GS" >South Georgia and the South Sandwich Islands</option>
8414      <option label="South Korea" value="KR" >South Korea</option>
8415      <option label="Sri Lanka" value="LK" >Sri Lanka</option>
8416      <option label="Sudan" value="SD" >Sudan</option>
8417      <option label="Suriname" value="SR" >Suriname</option>
8418      <option label="Svalbard and Jan Mayen" value="SJ" >Svalbard and Jan Mayen</option>
8419      <option label="Swaziland" value="SZ" >Swaziland</option>
8420      <option label="Switzerland" value="CH" >Switzerland</option>
8421      <option label="Taiwan" value="TW" >Taiwan</option>
8422      <option label="Tajikistan" value="TJ" >Tajikistan</option>
8423      <option label="Tanzania" value="TZ" >Tanzania</option>
8424      <option label="Thailand" value="TH" >Thailand</option>
8425      <option label="Timor-Leste" value="TL" >Timor-Leste</option>
8426      <option label="Togo" value="TG" >Togo</option>
8427      <option label="Tokelau" value="TK" >Tokelau</option>
8428      <option label="Tonga" value="TO" >Tonga</option>
8429      <option label="Trinidad and Tobago" value="TT" >Trinidad and Tobago</option>
8430      <option label="Tunisia" value="TN" >Tunisia</option>
8431      <option label="Turkey" value="TR" >Turkey</option>
8432      <option label="Turkmenistan" value="TM" >Turkmenistan</option>
8433      <option label="Turks and Caicos Islands" value="TC" >Turks and Caicos Islands</option>
8434      <option label="Tuvalu" value="TV" >Tuvalu</option>
8435      <option label="Uganda" value="UG" >Uganda</option>
8436      <option label="Ukraine" value="UA" >Ukraine</option>
8437      <option label="United Arab Emirates" value="AE" >United Arab Emirates</option>
8438      <option label="Uruguay" value="UY" >Uruguay</option>
8439      <option label="U.S. Minor Outlying Islands" value="UM" >U.S. Minor Outlying Islands</option>
8440      <option label="U.S. Virgin Islands" value="VI" >U.S. Virgin Islands</option>
8441      <option label="Uzbekistan" value="UZ" >Uzbekistan</option>
8442      <option label="Vanuatu" value="VU" >Vanuatu</option>
8443      <option label="Vatican City" value="VA" >Vatican City</option>
8444      <option label="Vietnam" value="VN" >Vietnam</option>
8445      <option label="Wallis and Futuna" value="WF" >Wallis and Futuna</option>
8446      <option label="Western Sahara" value="EH" >Western Sahara</option>
8447      <option label="Yemen" value="YE" >Yemen</option>
8448      <option label="Zambia" value="ZM" >Zambia</option>
8449      <option label="Zimbabwe" value="ZW" >Zimbabwe</option>
8450  </select>
8451  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country-6abe1b4648ab6--error" x-text="errorText"></div>
8452  </div></div>
8453  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="buying_on_behalf_country_6abe1b4648ab6--error" x-text="errorText"></div>
8454  </div>        </fieldset>
8455    </template>
8456</div>
8457          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex 
8457tw-flex-row-reverse tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-7 tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
8458                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-mask tw-bg-clarity-white"></span>                Next
8459                    <span class="loader"></span>
8460            </button>
8461      </div>
8462</form>
8463            <form
8464  @submit.prevent="nextStep"
8465  x-show="isCurrentStep"
8466  data-step=4
8467  data-name="payment"
8468  data-title="Payment Details"
8469  :data-current-step="isCurrentStep"
8470  class="tw-h-full"
8471  
8472>
8473  <div class="tw-pb-[30px] tw-px-[30px]" x-cloak="x-cloak">    
8474    <fieldset 
8475    class="braintree-fields tw-flex tw-flex-col tw-gap-y-4"
8476    data-form-id="multistepForm-6abe1b4648ab6"
8477    data-braintree
8478>
8479    <legend class="tw-font-bold tw-py-4">Credit Card Information</legend>
8480
8481    
8482        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="card-number">
8483  <label class="form__label" for="card-number" 
8484  >
8485    Card Number<span x-show="required">*</span>
8486  </label>
8487  <div id="card-number" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
8488  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="card-number--error" x-text="errorText"></div>
8489  </div>
8490        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="cvv">
8491  <label class="form__label" for="cvv" 
8492  >
8493    CVV<span x-show="required">*</span>
8494  </label>
8495  <div id="cvv" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
8496  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="cvv--error" x-text="errorText"></div>
8497  </div>
8498        <div class="tw-relative tw-mt-4" x-data="FormElement" x-load="visible" for="expiration-date">
8499  <label class="form__label" for="expiration-date" 
8500  >
8501    Expiration Date<span x-show="required">*</span>
8502  </label>
8503  <div id="expiration-date" class="braintree-fields__field tw-border tw-border-active-blue tw-h-12"></div>
8504  <div aria-live="assertive" aria-relevant="additions removals" class="form__label-error" id="expiration-date--error" x-text="errorText"></div>
8505  </div>
8506        
8507        <input type="hidden" name="payment_method" value="braintree">
8508        
8509        <div x-data="DataLayer" x-load="visible" x-init="addPaymentInfo">
8510            <input type="hidden" x-ref="productData" :value="productData">
8511        </div>  
8512    </fieldset>
8513          <button class="button__base button__primary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-gap-x-2 tw-flex tw-px-8 tw-py-4 tw-text-base tw-flex tw-font-bold tw-justify-center tw-items-center tw-mt-4 tw-w-full [&_.tw-icon]:hover:tw-bg-active-blue" type="submit">
8514                    <span aria-hidden="true" class="tw-icon sprite-secure-mask tw-bg-clarity-white"></span>                Donate
8515                    <span class="loader"></span>
8516            </button>
8517      </div>
8518</form>
8519        </div>
8520    </div>
8521</div>
8522
8523    </div>
8524</div>            </body>
8525    <footer x-data="Footer" x-load>
8526  <div class="tw-py-10 tw-bg-soil-brown theme--charcoal">
8527    <div class="tw-wrapper tw-grid tw-gap-y-10 lg:tw-gap-y-20">
8528      
8529      <div class="">
8530        <form id="newsletterSignUp-6abe1b464b7bb" x-data="NewsletterSignUp" x-load @submit.prevent="signUpForNewsletter" class="tw-grid lg:tw-grid-cols-2 tw-items-baseline tw-gap-y-6 tw-text-center md:tw-text-left" data-validate>
8531          <input type="hidden" name="_token" value="AaiHQyPwQTzKzi3VY1648fdfQzrjt3FmebgRzcHn" autocomplete="off">                <div id="voight-kampff_SCbgL8lzwZGJLjVb_wrap"  style="display: none" aria-hidden="true">
8532        <input id="voight-kampff_SCbgL8lzwZGJLjVb"
8533               name="voight-kampff_SCbgL8lzwZGJLjVb"
8534               type="text"
8535               value=""
8536                              autocomplete="nope"
8537               tabindex="-1">
8538        <input name="valid_from"
8539               type="text"
8540               value="eyJpdiI6InFrLzNaeS8weWgyOW5YYjlEdkJBYUE9PSIsInZhbHVlIjoiNlFLblJuVXZ4emttaUF3T3hJWG5XQT09IiwibWFjIjoiZjhhYTk2NWJkODNmODc0YThmOTU5NTdiOTY0ZmMzYWNlNTY1NTBlZTQ5NDBmYmIzNTJhZDI4MmZlZjFjZTlmZCIsInRhZyI6IiJ9"
8541                              autocomplete="off"
8542               tabindex="-1">
8543    </div>
8544              <label class="tw-font-libre-baskerville tw-text-3xl tw-text-white" for="newsletter-email">Sign up for email</label>
8545          <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-y-9 tw-gap-x-16 tw-items-baseline">
8546            <div class="tw-w-full">
8547              <div x-show="onSuccess" x-cloak class="tw-bg-cultivate-green tw-p-3 tw-text-sm tw-text-white tw-mt-2 tw-mb-4">Success! You are signed up for the newsletter.</div>
8548              <div x-show="onError" x-cloak class="tw-bg-alert-red tw-p-3 tw-text-sm tw-text-white tw-mt-2 tw-mb-4">Something went wrong.</div>
8549              <input x-show="showForm" id="newsletter-email" class="tw-w-full tw-border-0 tw-border-b-2 tw-border-white tw-text-white tw-bg-transparent placeholder:tw-text-white focus-visible:tw-outline-active-blue focus-within:tw-ring-active-blue" type="email" name="email" placeholder="Email*" required>
8550            </div>
8551            <button class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-5 tw-text-lg tw-w-full [&_span.loader]:tw-ml-[15px] md:tw-w-auto" x-show="showForm" type="submit">
8552                <span x-show="showButtonText">Join</span>
8553                    <span class="loader"></span>
8554            </button>
8555          </div>
8556        </form>
8557      </div>
8558      
8559      <div class="">
8560        <nav aria-label="Footer Main Navigation" class="tw-w-full tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-justify-center lg:tw-justify-between tw-gap-y-6 tw-gap-x-8 tw-text-center lg:tw-text-left">
8561                                    <div class="">
8562                <div class="tw-flex tw-items-end tw-justify-center lg:tw-justify-start tw-gap-3 tw-mb-5">
8563                                      <a class="tw-text-base tw-font-extrabold tw-text-white tw-uppercase tw-tracking-[1.778px] hover:tw-decoration tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/our-work">
8564                      Our Work
8565                    </a>
8566                                    <button class="tw-block md:tw-hidden tw-rotate-90" data-toggle-trigger="1327" aria-label="Toggle Our Work Pages">
8567                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-thick-mask tw-bg-white tw-pointer-events-none"></span>                  </button>
8568                </div>
8569                                  <ul class="tw-hidden md:tw-block" data-toggle-target="1327">
8570                                          <li>
8571                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/our-work/approach">
8572                          Our Approach
8573                        </a>
8574                      </li>
8575                                          <li>
8576                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/our-work/focus-areas">
8577                          Our Focus Areas
8578                        </a>
8579                      </li>
8580                                          <li>
8581                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/our-work/where-we-work">
8582                          Where We Work
8583                        </a>
8584                      </li>
8585                                          <li>
8586                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/our-work/programs">
8587                          Our Programs
8588                        </a>
8589                      </li>
8590                                      </ul>
8591                              </div>
8592                          <div class="">
8593                <div class="tw-flex tw-items-end tw-justify-center lg:tw-justify-start tw-gap-3 tw-mb-5">
8594                                      <a class="tw-text-base tw-font-extrabold tw-text-white tw-uppercase tw-tracking-[1.778px] hover:tw-decoration tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/take-action">
8595                      Take Action
8596                    </a>
8597                                    <button class="tw-block md:tw-hidden tw-rotate-90" data-toggle-trigger="63" aria-label="Toggle Take Action Pages">
8598                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-thick-mask tw-bg-white tw-pointer-events-none"></span>                  </button>
8599                </div>
8600                                  <ul class="tw-hidden md:tw-block" data-toggle-target="63">
8601                                          <li>
8602                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/take-action/get-involved">
8603                          Get Involved
8604                        </a>
8605                      </li>
8606                                          <li>
8607                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/give">
8608                          Give
8609                        </a>
8610                      </li>
8611                                          <li>
8612                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/take-action/partners">
8613                          Partner with Heifer
8614                        </a>
8615                      </li>
8616                                      </ul>
8617                              </div>
8618                          <div class="">
8619                <div class="tw-flex tw-items-end tw-justify-center lg:tw-justify-start tw-gap-3 tw-mb-5">
8620                                      <span class="tw-text-base tw-font-extrabold tw-text-white tw-uppercase tw-tracking-[1.778px] hover:tw-decoration">
8621                      Quick Links
8622                    </span>
8623                                    <button class="tw-block md:tw-hidden tw-rotate-90" data-toggle-trigger="1597" aria-label="Toggle Quick Links Pages">
8624                    <span aria-hidden="true" class="tw-icon sprite-arrow-right-thick-mask tw-bg-white tw-pointer-events-none"></span>                  </button>
8625                </div>
8626                                  <ul class="tw-hidden md:tw-block" data-toggle-target="1597">
8627                                          <li>
8628                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/blog">
8629                          News &amp; Stories
8630                        </a>
8631                      </li>
8632                                          <li>
8633                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/usa">
8634                          Heifer USA
8635                        </a>
8636                      </li>
8637                                          <li>
8638                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/about-us/careers">
8639                          Careers
8640                        </a>
8641                      </li>
8642                                          <li>
8643                        <a class="tw-text-sm tw-text-white tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/about-us/inside-heifer/financial-information">
8644                          Financial Information
8645                        </a>
8646                      </li>
8647                                      </ul>
8648                              </div>
8649                                <div class="tw-py-6 tw-border-y-2 md:tw-border-0 tw-border-vista-blue md:tw-pt-0">
8650            <ul class="">
8651              <li class="tw-mb-5">
8652                <a class="tw-text-base tw-font-extrabold tw-text-white tw-uppercase tw-tracking-[1.778px] hover:tw-decoration tw-decoration-vista-blue tw-decoration-[3px] hover:tw-underline" href="/">
8653                  Heifer International
8654                </a>
8655              </li>
8656            </ul>
8657                          <address class="tw-mb-8 tw-text-sm tw-leading-6 tw-not-italic tw-text-white">
8658                                  <div>1 World Avenue</div>
8659                                                  <div>Little Rock, AR 72202</div>
8660                                                  <div>USA</div>
8661                                                  <div>855.9HUNGER (855.948.6437)</div>
8662                              </address>
8663                        <div class="tw-mb-8">
8664              <button class="button__base button__secondary tw-font-montserrat tw-inline-block tw-m-0 tw-no-underline tw-outline-0 tw-relative tw-size-auto tw-text-center tw-font-bold tw-uppercase tw-tracking-widest tw-group tw-px-8 tw-py-4 tw-text-base" x-data="LiveChat" x-load="x-load" @click="openChat">
8665                Live Chat
8666            </button>
8667            </div>
8668                          <ul class="tw-flex tw-items-center tw-justify-center lg:tw-justify-start tw-gap-4">
8669                                                                  <li>
8670                            <a href="https://www.facebook.com/heiferinternational/" target="_blank" aria-label="facebook">
8671                                <span aria-hidden="true" class="tw-icon sprite-facebook-mask tw-bg-white tw-text-xl"></span>                            </a>
8672                          </li>
8673                                                                                        <li>
8674                            <a href="https://www.instagram.com/heiferinternational/" target="_blank" aria-label="instagram">
8675                                <span aria-hidden="true" class="tw-icon sprite-instagram-mask tw-bg-white tw-text-xl"></span>                            </a>
8676                          </li>
8677                                                                                        <li>
8678                            <a href="https://www.linkedin.com/company/heifer-international/" target="_blank" aria-label="linkedin">
8679                                <span aria-hidden="true" class="tw-icon sprite-linkedin-mask tw-bg-white tw-text-xl"></span>                            </a>
8680                          </li>
8681                                                                                                                                <li>
8682                            <a href="https://x.com/Heifer" target="_blank" aria-label="twitter">
8683                                <span aria-hidden="true" class="tw-icon sprite-twitter-mask tw-bg-white tw-text-xl"></span>                            </a>
8684                          </li>
8685                                                                                        <li>
8686                            <a href="https://www.youtube.com/user/HeiferInternational" target="_blank" aria-label="youtube">
8687                                <span aria-hidden="true" class="tw-icon sprite-youtube-mask tw-bg-white tw-text-xl"></span>                            </a>
8688                          </li>
8689                                                        </ul>
8690                      </div>
8691        </nav>
8692      </div>
8693      
8694              <div class="tw-flex tw-flex-wrap tw-justify-center md:tw-justify-start tw-gap-8">
8695                        <figure class="tw-flex tw-items-center tw-justify-center">
8696                  <img loading="lazy" class="tw-max-h-[68px]" src="https://media-refresh.heifer.org/wp-content/uploads/footer-sealoftransparency.png" alt="Seal of Transparency logo" />
8697              </figure>
8698                        <figure class="tw-flex tw-items-center tw-justify-center">
8699                  <img loading="lazy" class="tw-max-h-[68px]" src="https://media-refresh.heifer.org/wp-content/uploads/footer-bbb.svg" alt="" />
8700              </figure>
8701                        <figure class="tw-flex tw-items-center tw-justify-center">
8702                  <img loading="lazy" class="tw-max-h-[68px]" src="https://media-refresh.heifer.org/wp-content/uploads/footer-compass.svg" alt="" />
8703              </figure>
8704                        <figure class="tw-flex tw-items-center tw-justify-center">
8705                  <img loading="lazy" class="tw-max-h-[68px]" src="https://media-refresh.heifer.org/wp-content/uploads/footer-hilton.svg" alt="" />
8706              </figure>
8707                        <figure class="tw-flex tw-items-center tw-justify-center">
8708                  <img loading="lazy" class="tw-max-h-[68px]" src="https://media-refresh.heifer.org/wp-content/uploads/footer-interaction.svg" alt="" />
8709              </figure>
8710                  </div>
8711          </div>
8712  </div>
8713  
8714  <div class="tw-wrapper-max tw-grid tw-gap-6 tw-py-10 lg:tw-py-16">
8715          <ul class="tw-flex tw-flex-col tw-flex-wrap tw-items-center tw-justify-center tw-gap-3 tw-text-center sm:tw-text-left sm:tw-flex-row">
8716                  <li>
8717            <a 
8718              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8719              href="/support/privacy-policy"
8720                          >
8721              Privacy &amp; Donation Policy
8722            </a>
8723            <span class="tw-hidden sm:tw-inline">|</span>          </li>
8724                  <li>
8725            <a 
8726              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8727              href="/direct-mail-preferences"
8728                          >
8729              Communication Preferences
8730            </a>
8731            <span class="tw-hidden sm:tw-inline">|</span>          </li>
8732                  <li>
8733            <a 
8734              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8735              href="/support/terms-of-use"
8736                          >
8737              Terms of Use
8738            </a>
8739            <span class="tw-hidden sm:tw-inline">|</span>          </li>
8740                  <li>
8741            <a 
8742              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr
8742-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8743              href="/support/charitable-solicitation-disclosure-statements"
8744                          >
8745              Charitable Solicitation Disclosure Statements
8746            </a>
8747            <span class="tw-hidden sm:tw-inline">|</span>          </li>
8748                  <li>
8749            <a 
8750              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8751              href="/site-requirements"
8752                          >
8753              Site Requirements
8754            </a>
8755            <span class="tw-hidden sm:tw-inline">|</span>          </li>
8756                  <li>
8757            <a 
8758              class="tw-inline-flex tw-text-sm tw-underline tw-decoration-vista-blue tw-decoration-2 tw-mr-2 tw-underline-offset-2 tw-tracking-[1.56px]" 
8759              href="https://www.lifeblue.com"
8760               target="_blank"             >
8761              Designed By Lifeblue
8762            </a>
8763                      </li>
8764              </ul>
8765        <p class="tw-text-sm tw-text-center">
8766      Heifer International is a 501(c)(3) nonprofit charity registered in the US under EIN: 35-1019477.
8767    </p>
8768  </div>
8769</footer>
8770
8771  
8772    
8773
8774</html>
8775
8776<!-- Page loaded in 1.3541 seconds. -->

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.