.elementor-4267 .elementor-element.elementor-element-eb1c0a4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4267 .elementor-element.elementor-element-047e978{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon-box-wrapper{gap:15px;}.elementor-4267 .elementor-element.elementor-element-bf88017.elementor-view-stacked .elementor-icon{background-color:#0E2C20;}.elementor-4267 .elementor-element.elementor-element-bf88017.elementor-view-framed .elementor-icon, .elementor-4267 .elementor-element.elementor-element-bf88017.elementor-view-default .elementor-icon{fill:#0E2C20;color:#0E2C20;border-color:#0E2C20;}.elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon-box-title{color:#FFFFFF;}.elementor-4267 .elementor-element.elementor-element-ae7712d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon-box-wrapper{gap:15px;}.elementor-4267 .elementor-element.elementor-element-1fcc67c.elementor-view-stacked .elementor-icon{background-color:#0E2C20;}.elementor-4267 .elementor-element.elementor-element-1fcc67c.elementor-view-framed .elementor-icon, .elementor-4267 .elementor-element.elementor-element-1fcc67c.elementor-view-default .elementor-icon{fill:#0E2C20;color:#0E2C20;border-color:#0E2C20;}.elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon-box-title{color:#FFFFFF;}.elementor-4267 .elementor-element.elementor-element-f8a8f27{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4267 .elementor-element.elementor-element-83e5e11{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4267 .elementor-element.elementor-element-350d862 .elementor-heading-title{font-family:"Poppins", Sans-serif;}.elementor-4267 .elementor-element.elementor-element-6fa4cc5{font-family:"Poppins", Sans-serif;font-weight:700;color:#020101;}.elementor-4267 .elementor-element.elementor-element-621d073 .elementor-button{background-color:#219B30;font-family:"Poppins", Sans-serif;fill:#FFFFFF;color:#FFFFFF;}.elementor-4267 .elementor-element.elementor-element-f349179 .elementor-heading-title{font-weight:700;}.elementor-4267 .elementor-element.elementor-element-82bb166{font-family:"Poppins", Sans-serif;font-weight:500;color:#1D1D1D;}body.elementor-page-4267:not(.elementor-motion-effects-element-type-background), body.elementor-page-4267 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F2D21;}body.elementor-page-4267{margin:0px 0px 0px 0px;}@media(min-width:768px){.elementor-4267 .elementor-element.elementor-element-047e978{--width:50%;}.elementor-4267 .elementor-element.elementor-element-ae7712d{--width:50%;}}@media(max-width:767px){.elementor-4267 .elementor-element.elementor-element-eb1c0a4{--margin-top:-17px;--margin-bottom:-27px;--margin-left:0px;--margin-right:0px;--z-index:5;}.elementor-4267 .elementor-element.elementor-element-047e978{--width:50%;}.elementor-4267 .elementor-element.elementor-element-bf88017 > .elementor-widget-container{margin:31px 0px 0px 6px;}.elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon-box-wrapper{text-align:start;gap:0px;}.elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon{font-size:28px;}.elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon-box-title, .elementor-4267 .elementor-element.elementor-element-bf88017 .elementor-icon-box-title a{font-size:13px;line-height:0.1em;}.elementor-4267 .elementor-element.elementor-element-ae7712d{--width:50%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4267 .elementor-element.elementor-element-1fcc67c > .elementor-widget-container{margin:24px 0px 0px 108px;}.elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon-box-wrapper{gap:0px;}.elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon{font-size:32px;}.elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon-box-title, .elementor-4267 .elementor-element.elementor-element-1fcc67c .elementor-icon-box-title a{font-size:13px;line-height:0.1em;}.elementor-4267 .elementor-element.elementor-element-f8a8f27{--margin-top:-86px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4267 .elementor-element.elementor-element-83e5e11:not(.elementor-motion-effects-element-type-background), .elementor-4267 .elementor-element.elementor-element-83e5e11 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://indianmuslimnetwork.com/wp-content/uploads/2024/11/efb2d1fbdc0f3a26d4c05d59dbc9772e-copy.png");background-position:top center;background-repeat:no-repeat;}.elementor-4267 .elementor-element.elementor-element-83e5e11{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4267 .elementor-element.elementor-element-350d862 > .elementor-widget-container{margin:6px 0px -7px 0px;}.elementor-4267 .elementor-element.elementor-element-350d862{text-align:center;}.elementor-4267 .elementor-element.elementor-element-350d862 .elementor-heading-title{font-size:20px;}.elementor-4267 .elementor-element.elementor-element-6fa4cc5 > .elementor-widget-container{margin:-8px 0px 0px 0px;}.elementor-4267 .elementor-element.elementor-element-6fa4cc5{text-align:center;font-size:26px;}.elementor-4267 .elementor-element.elementor-element-e9dddf3 > .elementor-widget-container{margin:-21px -21px -21px -21px;}.elementor-4267 .elementor-element.elementor-element-0a95e66 > .elementor-widget-container{margin:25px 0px 0px 0px;}.elementor-4267 .elementor-element.elementor-element-fd4fefa > .elementor-widget-container{margin:-12px -12px -12px -12px;padding:0px 0px 35px 0px;}.elementor-4267 .elementor-element.elementor-element-fd4fefa{text-align:center;line-height:1.3em;}.elementor-4267 .elementor-element.elementor-element-621d073 > .elementor-widget-container{margin:-48px 0px 0px 0px;}.elementor-4267 .elementor-element.elementor-element-621d073 .elementor-button{border-radius:117px 117px 117px 117px;}.elementor-4267 .elementor-element.elementor-element-f349179 > .elementor-widget-container{margin:-18px 0px 0px 0px;padding:0px 0px 0px -6px;}.elementor-4267 .elementor-element.elementor-element-f349179{text-align:center;}.elementor-4267 .elementor-element.elementor-element-f349179 .elementor-heading-title{font-size:17px;}.elementor-4267 .elementor-element.elementor-element-82bb166 > .elementor-widget-container{margin:-12px 0px 0px 0px;padding:0px 0px 8px 0px;}.elementor-4267 .elementor-element.elementor-element-82bb166{text-align:center;font-size:14px;}.elementor-4267 .elementor-element.elementor-element-0af6699 > .elementor-widget-container{padding:-15px -15px -15px -15px;}}/* Start custom CSS */<style>
    button {
        margin: 5px;
        width: 100px;
        height: 40px;
        border-radius: 8px;
        background-color: #28C77B;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #1E9E5E;
    }

    #customField:focus {
        border-color: #1E9E5E;
    }
</style>

<div style="display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; font-weight: bold;">
    <div style="display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: center; margin-top: 10px; position: relative;">
            <span style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #555; padding: 0 20px;">₹</span>
            <input type="text" id="customField" oninput="updateCustomField(this.value)" style="width: 285px; height: 40px; border-radius: 8px; border: 1px solid #28C77B; padding: 0 10px 0 30px;" placeholder="Other Amount">
        </div>
        <div style="display: flex; flex-wrap: wrap; justify-content: center;">
            <button type="button" onclick="updateCustomField(50)">₹ 50</button>
            <button type="button" onclick="updateCustomField(100)">₹ 100</button>
            <button type="button" onclick="updateCustomField(200)">₹ 200</button>
        </div>
        <div style="display: flex; flex-wrap: wrap; justify-content: center;">
            <button type="button" onclick="updateCustomField(500)">₹ 500</button>
            <button type="button" onclick="updateCustomField(1000)">₹ 1000</button>
            <button type="button" onclick="updateCustomField(5000)">₹ 5000</button>
        </div>
        <div style="display: flex; justify-content: center;">
            <button type="button" onclick="clearCustomField()">Custom Amount</button>
        </div>
    </div>
</div>

<script>
    function updateCustomField(amount) {
        localStorage.setItem('customAmount', amount);
        document.getElementById('customField').value = amount;
        setFluentFormField(amount); // Update Fluent Form field immediately
    }

    function clearCustomField() {
        localStorage.removeItem('customAmount');
        document.getElementById('customField').value = '';
        document.getElementById('customField').focus();
        setFluentFormField(''); // Clear Fluent Form field
    }

    // Function to set value to hidden field in Fluent Form
    function setFluentFormField(amount) {
        document.querySelector('input[name="hidden_1"]').value = amount || '';
    }

    // Call the function to set Fluent Form field value when the page loads
    window.onload = function() {
        setFluentFormField(localStorage.getItem('customAmount'));
    };
</script>/* End custom CSS */