.elementor-5576 .elementor-element.elementor-element-d2f0cfe{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 30px;--row-gap:0px;--column-gap:30px;}.elementor-5576 .elementor-element.elementor-element-e909110{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5576 .elementor-element.elementor-element-dbd1caf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5576 .elementor-element.elementor-element-dbd1caf img{width:100%;}.elementor-5576 .elementor-element.elementor-element-69ba5ea{--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;--padding-top:125px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5576 .elementor-element.elementor-element-0e3afc2{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-5576 .elementor-element.elementor-element-0e3afc2 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:700;color:var( --e-global-color-a045360 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5576 .elementor-element.elementor-element-9f60b44{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;}#elementor-popup-modal-5576{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-5576 .dialog-message{width:1000px;height:auto;}#elementor-popup-modal-5576 .dialog-close-button{display:flex;}#elementor-popup-modal-5576 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(min-width:768px){.elementor-5576 .elementor-element.elementor-element-e909110{--width:50%;}.elementor-5576 .elementor-element.elementor-element-69ba5ea{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-dcbbd7b */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form - Success Message</title>
    <style>
        * { box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
        body { background-color: #fdf8f4; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }
        .form-container { width: 100%; max-width: 650px; position: relative; }

        .input-group { margin-bottom: 20px; }
        .input-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #444; font-size: 18px; }
        .input-group input, .input-group select { 
            width: 100%; padding: 15px; border: 1px solid #ffffff; border-radius: 8px; 
            background-color: #ffffff; font-size: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); outline: none; 
        }

        .row { display: flex; gap: 20px; }
        .row .input-group { flex: 1; }

        .input-group select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 15px; cursor: pointer; }

        .checkbox-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 30px; }
        .checkbox-group input { width: 18px; height: 18px; margin-top: 3px; }
        .checkbox-group label { font-size: 14px; color: #555; line-height: 1.5; }

        .submit-btn { 
            width: 100%; padding: 16px; background-color: #f38a2b; color: white; border: none; 
            border-radius: 8px; font-size: 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: 0.3s; 
        }
        .submit-btn:hover { background-color: #e07a1b; }
        .submit-btn:disabled { background-color: #ccc; cursor: not-allowed; }

        /* Success Message Styling */
        #success-msg {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
        }

        @media (max-width: 600px) { .row { flex-direction: column; gap: 0; } }
    </style>
</head>
<body>

<div class="form-container">
    <form id="contactForm">
        <div class="input-group">
            <label>Full Name*</label>
            <input type="text" id="name" placeholder="Enter Your Name" required>
        </div>

        <div class="row">
            <div class="input-group">
                <label>Contact Number*</label>
                <input type="text" id="contact" placeholder="Enter Your Number" required>
            </div>
            <div class="input-group">
                <label>Email*</label>
                <input type="email" id="email" placeholder="Enter Your Email" required>
            </div>
        </div>

        <div class="input-group">
            <label>Address (State)*</label>
            <select id="address" required>
                <option value="" disabled selected>Select Your State</option>
                <option>New South Wales</option>
                <option>Victoria</option>
                <option>Queensland</option>
                <option>South Australia</option>
                <option>Western Australia</option>
                <option>Tasmania</option>
                <option>Northern Territory</option>
                <option>Australian Capital Territory</option>
            </select>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="privacy" required>
            <label for="privacy">I agree to the Privacy Policy and Terms & Conditions.</label>
        </div>

        <button type="submit" id="submitBtn" class="submit-btn">SEND REQUEST</button>
    </form>

    <div id="success-msg">✅ Message sent successfully! We will contact you soon.</div>
</div>

<script>
    const form = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');
    const successMsg = document.getElementById('success-msg');

    form.addEventListener('submit', function(e) {
        e.preventDefault(); // Page refresh bondho korbe

        // Button e loading state dekhano
        submitBtn.innerText = "SENDING...";
        submitBtn.disabled = true;

        // Mocking a send delay (2 seconds)
        setTimeout(() => {
            form.reset(); // Form clear kore dibe
            submitBtn.innerText = "SEND REQUEST";
            submitBtn.disabled = false;
            
            // Success message dekhano
            successMsg.style.display = "block";

            // 5 second por message chole jabe
            setTimeout(() => {
                successMsg.style.display = "none";
            }, 5000);

        }, 1500);
    });
</script>

</body>
</html>/* End custom CSS */