@extends('web.layout.app')
@section('css')

@endsection
@section('title','Donate')
@section('content')

    <div class="page-title about-page-title">
        <h1>Donate</h1>
    </div>
    <div class="section about-section">
        <div class="container">
            
        </div>
    </div>

    <div class="section history-section">
        <!-- <h2 class="text-center">Donate</h2> -->
        <div class="container">
        <section class=" flex justify-center">
            <form id="wf-form-Donation-Form" class="!bg-[var(--section-color)] !rounded-[var(--section-rounded)] !w-full !max-w-[680px] !mx-auto !p-[var(--section-padding)]" name="wf-form-Donation-Form"  method="post" data-wf-page-id="68106b8a96004c5fca1fd311" data-wf-element-id="7e94311d-cbae-3019-bdc4-98923bca6261" aria-label="Donation Form" action="https://taharav2-steph-ks-projects.vercel.app/v1/donations">
                <div id="paymentwrapper" class="payment-main-box"></div>
                <input type="hidden" name="selectedamt">
                <input type="hidden" name="selectedduration">
                <input type="hidden" name="selectedcurrency">
                <!-- Custom Amount Card -->
        
                <div class="form-outer-main !bg-[var(--form-bg)] !rounded-[var(--form-area-rounded)] !mt-[var(--form-margin-top)] !p-[var(--form-padding)]">
                    <div class="!max-w-[var(--form-width)] !mx-auto">
                        <h2 style="font-size: var(--group-subtitle-size); text-transform: var(--group-subtitle-text-transform);" class="!font-[var(--group-subtitle-font-weight)] !mb-[var(--group-subtitle-margin-bottom)] text-center !text-[var(--group-subtitle-color)] !p-0 !bg-none Bethany">Enter your infomation</h2>
                        <div class="space-y-5">
                            <div class="flex flex-col">
                               
                                    <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Name</label>
									
									<div class="flex gap-5">
                                    <input placeholder="First name" style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize"
                                        autofocus="true" maxlength="256" name="firstname"  type="text" id="name" />
                              
                                
                                   
                                    <input placeholder="Last name"
                                        style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize"
                                        autofocus="true" maxlength="256" name="lastname"  type="text"
                                        id="lastname" />
										</div>
                              
                            </div>
        
                            <div>
                                <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Email</label>
                                <div class="relative">
                                    <svg class="absolute top-1/2 left-4 -translate-y-1/2" width="20" height="16"
                                        viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M1.66669 3.74487L8.47079 8.50774C9.02176 8.89343 9.29725 9.08627 9.59691 9.16096C9.8616 9.22694 10.1384 9.22694 10.4031 9.16096C10.7028 9.08627 10.9783 8.89343 11.5293 8.50774L18.3334 3.74487M5.66669 14.5782H14.3334C15.7335 14.5782 16.4336 14.5782 16.9683 14.3057C17.4387 14.066 17.8212 13.6836 18.0609 13.2132C18.3334 12.6784 18.3334 11.9783 18.3334 10.5782V5.24487C18.3334 3.84474 18.3334 3.14468 18.0609 2.6099C17.8212 2.13949 17.4387 1.75704 16.9683 1.51736C16.4336 1.24487 15.7335 1.24487 14.3334 1.24487H5.66669C4.26656 1.24487 3.56649 1.24487 3.03171 1.51736C2.56131 1.75704 2.17885 2.13949 1.93917 2.6099C1.66669 3.14468 1.66669 3.84474 1.66669 5.24487V10.5782C1.66669 11.9783 1.66669 12.6784 1.93917 13.2132C2.17885 13.6836 2.56131 14.066 3.03171 14.3057C3.56649 14.5782 4.26656 14.5782 5.66669 14.5782Z"
                                            stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
        
                                    <input type="email" placeholder="example@gmail.com"
                                        style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!lowercase !ps-[40px]"
                                        autofocus="true" maxlength="256" name="email"  id="email" />
                                </div>
                            </div>
        
                            <div>
                                <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Phone (optional)</label>
                                <input placeholder="000-000-0000"
                                   style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize"
                                    autofocus="true" maxlength="256" name="phone"  type="tel" id="Phone" />
                            </div>
							
							</div>
                            
							
							<div class="!mt-5">
                            <!-- kvitel -->
        
                            <div class="">
                                <!-- Checkbox -->
                                <label class="inline-flex gap-[2px] items-center space-x-2 cursor-pointer">
                                    <input class="peer hidden" type="checkbox" id="kvital-checkbox" name="is_kvital" data-target="kvital-container">
                                    <span class="!w-[16px] !m-0 !h-[16px] border !border-[var(--input-border)] !rounded-[var(--input-rounded)] flex items-center justify-center bg-white peer-checked:!bg-[var(--checkbox-bg)] peer-checked:!border-[var(--checkbox-bg)] transition-all duration-200">
                                        <svg width="12" height="8" viewBox="0 0 12 10" class="checkbox-svg text-white"><polyline points="1.5 6 4.5 9 10.5 1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg>
                                    </span>  <span style="font-size: var(--input-label-size);" class="!font-[var(--input-label-font-weight)] !text-[var(--input-label-color)]">Kvitel</span>
                                </label>
        
                                <!-- Hidden Expandable Form -->
                                <div id="kvital-container" class="transition-all duration-300 flex flex-col hidden"
                                    >
                                    <div class="flex  pt-[10px]">
                                        <!--<div class="w-1/2 relative">
                                            <select
                                                class="tim-4 focus:z-[1] relative w-full appearance-none border border-[#D5D7DA] px-4 pr-10 py-4 text-base outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] bg-white text-[#414651] rounded-tl-md" name="kvital_prefix">
                                                <option value="" disabled selected>Title</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                                <option value="other">Other</option>
                                            </select>
        
                                           
                                            <div
                                                class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-[#414651]">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7">
                                                    </path>
                                                </svg>
                                            </div>
                                        </div>-->
                                        <div class="w-1/2">
                                            <input type="text" placeholder="Your name"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize"  name="kvital_name"/>
                                        </div>
										<div class="w-1/2">
                                            <input type="text" placeholder="Email"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize"  name="kvital_email"/>
                                        </div>
                                    </div>
                                    <div class="flex flex-col ">
                                        <input type="text" placeholder="Mother's name"
                                        style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" name="kvital_mothername" />
											
											 </div>
											 <div class="flex flex-col ">
                                        <textarea placeholder="Kvitel"
                                        style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" name="kvital_message"></textarea>
                                    </div>
                                </div>
                            </div>
							
							<div class="">
                                <!-- Checkbox -->
                                <label class="inline-flex gap-[2px] items-center space-x-2 cursor-pointer">
                                    <input class="peer hidden" type="checkbox" id="dedicate-checkbox" name="is_dedicated"  data-target="dedication-container">
                                    <span class="!w-[16px] !m-0 !h-[16px] border !border-[var(--input-border)] !rounded-[var(--input-rounded)] flex items-center justify-center bg-white peer-checked:!bg-[var(--checkbox-bg)] peer-checked:!border-[var(--checkbox-bg)] transition-all duration-200">
                                        <svg width="12" height="8" viewBox="0 0 12 10" class="checkbox-svg text-white"><polyline points="1.5 6 4.5 9 10.5 1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg>
                                    </span>  <span style="font-size: var(--input-label-size);" class="!font-[var(--input-label-font-weight)] !text-[var(--input-label-color)]">In honor/memory</span>
                                </label>
        
                                <!-- Hidden Input Field -->
                                <div id="dedication-container" class=" hidden transition-all duration-300">
                                    <input type="text" placeholder="Honoree name"
                                    style="font-size: var(--input-text-size);"
                                    class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" name="dedication"/>
                                </div>
                            </div>
                        </div>
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
        
                        <div class="max-w-[420px] mx-auto mt-10">
                        <h2 style="font-size: var(--group-subtitle-size); text-transform: var(--group-subtitle-text-transform);" class="!font-[var(--group-subtitle-font-weight)] !mb-[var(--group-subtitle-margin-bottom)] text-center !text-[var(--group-subtitle-color)] !p-0 !bg-none Bethany">Payment info</h2>
        
                            <input type="hidden" name="payment_type" class="selected_payment_type" value=""/>
                            <div id="payment-section" class="w-full max-w-2xl mx-auto pgateway-tabs">
                                <!-- Payment Method Tabs -->
                                <div id="payment-tabs"
                                    class="transition-opacity duration-300 ease-in-out opacity-100 flex bg-[var(--payment-bar-bg)] border !border-[var(--payment-tab-border)] justify-between !mb-5 rounded-[var(--payment-bar-rounded)] flex-wrap highlight transition-all duration-300 ">
                                    <button style="font-size: var(--payment-tab-size);" type="button" data-method="cc"
                                        class="tab-button text-[var(--payment-tab-color)] !font-[var(--payment-tab-font-weight)] flex-grow transition-all bg-[var(--payment-tab-bg)] rounded-[var(--payment-tab-rounded)] border-r !border-[var(--payment-tab-border)] !p-[var(--payment-tab-padding)]">Card</button>
                                    <button style="font-size: var(--payment-tab-size);" type="button"  data-method="donors"
                                        class="tab-button text-[var(--payment-tab-color)] !font-[var(--payment-tab-font-weight)] flex-grow transition-all bg-[var(--payment-tab-bg)] rounded-[var(--payment-tab-rounded)] border-r !border-[var(--payment-tab-border)] !p-[var(--payment-tab-padding)]">Donors
                                        Fund</button>
                                    <button style="font-size: var(--payment-tab-size);" type="button"  data-method="ojc"
                                        class="tab-button text-[var(--payment-tab-color)] !font-[var(--payment-tab-font-weight)] flex-grow transition-all bg-[var(--payment-tab-bg)] rounded-[var(--payment-tab-rounded)] border-r !border-[var(--payment-tab-border)] !p-[var(--payment-tab-padding)]">OJC</button>
                                    <button style="font-size: var(--payment-tab-size);" type="button"  data-method="pledger"
                                        class="tab-button text-[var(--payment-tab-color)] !font-[var(--payment-tab-font-weight)] flex-grow transition-all bg-[var(--payment-tab-bg)] rounded-[var(--payment-tab-rounded)] !p-[var(--payment-tab-padding)]">Pledger</button>
                                   
                                </div>
        
                                <!-- Payment Method Contents -->
                                <div id="tab-content-cc" class="tab-content block">
                                    <!-- Card Info -->
                                    <div class="mb-5">
                                        <div class="space-y-5">
                                            <div>
                                                <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Card number</label>
                                                <div class="relative">
        
                                                    <svg class="absolute top-1/2 left-4 -translate-y-1/2" width="34" height="25"
                                                        viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z"
                                                            fill="white"></path>
                                                        <path
                                                            d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z"
                                                            stroke="#E9EAEB"></path>
                                                        <path
                                                            d="M21.5771 5.94141C25.322 5.94141 28.3584 8.94129 28.3584 12.6416C28.3583 16.3418 25.322 19.3418 21.5771 19.3418C19.8982 19.3418 18.3629 18.737 17.1787 17.7383C15.9945 18.7369 14.4591 19.3418 12.7803 19.3418C9.03566 19.3416 6.00011 16.3417 6 12.6416C6 8.94143 9.03559 5.94163 12.7803 5.94141C14.459 5.94141 15.9945 6.54548 17.1787 7.54395C18.3629 6.54535 19.8983 5.94143 21.5771 5.94141Z"
                                                            fill="#ED0006"></path>
                                                        <path
                                                            d="M21.5774 5.94141C25.3222 5.94149 28.3577 8.94134 28.3577 12.6416C28.3576 16.3418 25.3221 19.3417 21.5774 19.3418C19.8985 19.3418 18.3632 18.737 17.179 17.7383C18.6361 16.5094 19.5617 14.6829 19.5618 12.6416C19.5618 10.6001 18.6363 8.77284 17.179 7.54395C18.3631 6.54541 19.8986 5.94141 21.5774 5.94141Z"
                                                            fill="#F9A000"></path>
                                                        <path
                                                            d="M17.1785 7.54395C18.636 8.77284 19.5613 10.6 19.5613 12.6416C19.5612 14.683 18.6358 16.5094 17.1785 17.7383C15.7215 16.5094 14.7967 14.6827 14.7966 12.6416C14.7966 10.6003 15.7213 8.77284 17.1785 7.54395Z"
                                                            fill="#FF5E00"></path>
                                                    </svg>
        
        
                                                    <input type="text" name="cc_card_number" placeholder="Card number"
                                                    style="font-size: var(--input-text-size);"
                                                    class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize !ps-[58px]" />
                                                </div>
                                            </div>
        
                                            <div class="flex gap-5">
                                                <div class="w-1/2">
                                                    <label
                                                    style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Expiration</label>
                                                    <input type="text" name="cc_expiry" placeholder="00/00"
                                                    style="font-size: var(--input-text-size);"
                                                    class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                                </div>
                                                <div class="w-1/2">
                                                    <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">CSV</label>
                                                    <input  name="cc_cvv" type="text" placeholder="000"
                                                    style="font-size: var(--input-text-size);"
                                                    class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                   
                                </div>
                                <div id="tab-content-donors" class="tab-content hidden">
                                    <div class="mb-[40px]">
                                        <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Donors info</label>
                                        <div class="flex">
                                            <input type="text"  name="donors_card_number"placeholder="Card number or username"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] !w-[70%] border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                            <input type="text"  name="donors_cvv"placeholder="CVC"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] !w-[30%] border-l-0 border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
        
                                        </div>
                                    </div>
        
                                </div>
        
                                <div id="tab-content-ojc" class="tab-content hidden">
                                    <div class="mb-[40px]">
                                        <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">OJC info</label>
                                        <div class="flex">
                                            <input type="text" name="ojc_card_number" placeholder="OJC Card number"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] !w-[70%] border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                            <input type="text" name="ojc_expiry" placeholder="Expiration"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-[30%] border-l-0 border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
        
                                        </div>
                                    </div>
                                </div>
        
                                <div id="tab-content-pledger" class="tab-content hidden">
                                    <!-- Card Info -->
                                    <div class="mb-5">
                                        <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Card info</label>
                                        <div class="flex flex-col">
                                            <div class="flex relative">
                                                <!-- Card Icon -->
                                                <svg width="34" height="25" viewBox="0 0 34 25" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg" class="absolute left-4 z-[2] top-[16px]">
                                                    <path
                                                        d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z"
                                                        fill="white" />
                                                    <path
                                                        d="M4 1.4115H30C31.933 1.4115 33.5 2.9785 33.5 4.9115V20.9115C33.5 22.8445 31.933 24.4115 30 24.4115H4C2.067 24.4115 0.5 22.8445 0.5 20.9115V4.9115C0.5 2.9785 2.067 1.4115 4 1.4115Z"
                                                        stroke="#E9EAEB" />
                                                    <path
                                                        d="M21.5771 5.94141C25.322 5.94141 28.3584 8.94129 28.3584 12.6416C28.3583 16.3418 25.322 19.3418 21.5771 19.3418C19.8982 19.3418 18.3629 18.737 17.1787 17.7383C15.9945 18.7369 14.4591 19.3418 12.7803 19.3418C9.03566 19.3416 6.00011 16.3417 6 12.6416C6 8.94143 9.03559 5.94163 12.7803 5.94141C14.459 5.94141 15.9945 6.54548 17.1787 7.54395C18.3629 6.54535 19.8983 5.94143 21.5771 5.94141Z"
                                                        fill="#ED0006" />
                                                    <path
                                                        d="M21.5774 5.94141C25.3222 5.94149 28.3577 8.94134 28.3577 12.6416C28.3576 16.3418 25.3221 19.3417 21.5774 19.3418C19.8985 19.3418 18.3632 18.737 17.179 17.7383C18.6361 16.5094 19.5617 14.6829 19.5618 12.6416C19.5618 10.6001 18.6363 8.77284 17.179 7.54395C18.3631 6.54541 19.8986 5.94141 21.5774 5.94141Z"
                                                        fill="#F9A000" />
                                                    <path
                                                        d="M17.1785 7.54395C18.636 8.77284 19.5613 10.6 19.5613 12.6416C19.5612 14.683 18.6358 16.5094 17.1785 17.7383C15.7215 16.5094 14.7967 14.6827 14.7966 12.6416C14.7966 10.6003 15.7213 8.77284 17.1785 7.54395Z"
                                                        fill="#FF5E00" />
                                                </svg>
                                                <input type="text" name="pledger_card_number" placeholder="Card number"
                                                style="font-size: var(--input-text-size);"
                                                class="!text-[var(--input-text-color)] w-full border-b-0 border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize !ps-[58px]" />
                                            </div>
                                            <div class="flex">
                                                <input type="text" name="pledger_expiry" placeholder="Expiry"
                                                style="font-size: var(--input-text-size);"
                                                class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                                <input type="text" name ="pledger_cvv" placeholder="CVV"
                                                style="font-size: var(--input-text-size);"
                                                class="!text-[var(--input-text-color)] w-full border-l-0 border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                            </div>
                                        </div>
                                    </div>
        
                                   
                                </div>
                               
                            </div>
        
        
                                <!-- Billing Address -->
                                <div class="mb-[40px]">
                                    <label style="font-size: var(--input-label-size);" class="block !font-[var(--input-label-font-weight)] !mb-[var(--input-label-margin-bottom)] !text-[var(--input-label-color)]">Billing
                                        address</label>
										
                                    <div class=" flex flex-col">
                                        <input name="address" type="text" placeholder="Your address"
                                        style="font-size: var(--input-text-size);"
                                        class="!text-[var(--input-text-color)] w-full border-b-0 border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                        <div class=" flex">
                                            <input name="city" type="text" placeholder="City"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                            <input  name="state" type="text" placeholder="State"
                                            style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-full border-y !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                            <input  name="zip" type="text"  placeholder="Zip" style="font-size: var(--input-text-size);"
                                            class="!text-[var(--input-text-color)] w-full border !border-[var(--input-border)] !rounded-[var(--input-rounded)] placeholder:!text-[var(--input-placeholder-text-color)] focus:outline-none focus:ring-2 focus:!ring-[var(--input-focus-border)] focus:!border-transparent focus:z-[1] transition-all required !p-[var(--input-text-padding)] placeholder:!capitalize" />
                                        </div>
                                    </div>
                                </div>
        
                            <!-- Donation Amount -->
                            <div class="flex items-center justify-center mb-[40px]">
                                <p style="font-size: var(--donation-amount-size);" class="!font-[var(--donation-amount-font-weight)] Bethany !text-[var(--donation-amount-color)] total-amt-selected">$7,200</p>
                                <p style="font-size: var(--donation-text-size);" class="!text-[var(--donation-text-color)] !font-[var(--donation-text-font-weight)] amt-desc">/mo for 12 months</p>
                            </div>
        
                            <!-- Submit Button -->
                             <div data-sitekey="SITE_KEY" data-callback="cfCallback" class="cf-turnstile !mb-3"></div>
                            <button style="font-size: var(--submit-size); text-transform:var(--submit-text-transform);" type="submit"
                                class="w-full !bg-[var(--submit-bg)] !text-[var(--submit-color)] !p-[var(--submit-padding)] !font-[var(--submit-font-weight)] !rounded-[var(--submit-rounded)] flex items-center justify-center gap-5 hover:!bg-[var(--submit-hover-bg)] hover:!text-[var(--submit-hover-color)] border !border-[var(--submit-border)] hover:!border-[var(--submit-hover-border)] group transition-all">
                                <svg width="19" height="21" fill="none" viewBox="0 0 19 21" class="stroke-[var(--submit-color)] transition-all group-hover:stroke-[var(--submit-hover-color)]" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.1333 8.41162V6.41162C14.1333 3.6502 11.8947 1.41162 9.1333 1.41162C6.37188 1.41162 4.1333 3.6502 4.1333 6.41162V8.41162M9.1333 12.9116V14.9116M5.9333 19.4116H12.3333C14.0135 19.4116 14.8535 19.4116 15.4953 19.0846C16.0598 18.797 16.5187 18.3381 16.8063 17.7736C17.1333 17.1319 17.1333 16.2918 17.1333 14.6116V13.2116C17.1333 11.5315 17.1333 10.6914 16.8063 10.0496C16.5187 9.48516 16.0598 9.02622 15.4953 8.7386C14.8535 8.41162 14.0135 8.41162 12.3333 8.41162H5.9333C4.25314 8.41162 3.41306 8.41162 2.77133 8.7386C2.20684 9.02622 1.7479 9.48516 1.46028 10.0496C1.1333 10.6914 1.1333 11.5315 1.1333 13.2116V14.6116C1.1333 16.2918 1.1333 17.1319 1.46028 17.7736C1.7479 18.3381 2.20684 18.797 2.77133 19.0846C3.41306 19.4116 4.25314 19.4116 5.9333 19.4116Z"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
        
                                <span>Process donation</span>
                            </button>
        
                            <!-- Footer Text -->
                            <p style="font-size:var(--submit-bottom-size);" class="!text-center !text-[var(--submit-bottom-color)] !mt-2">
                                All donations are processed securely.<br />
                                You can cancel your recurring donation at any time.
                            </p>
                            <div class="msg-container"></div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        </div>
    </div>

    

    


@endsection
@section('scripts')
@endsection