Contact

<style>
    /* container */

    .contact-container {
        max-width: 1200px;
        margin: auto;
        padding: 40px 20px;
    }

    /* grid */

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* form box */

    .contact-form {
        background: #fff8f3;
        padding: 30px;
        border: 2px solid #e2c9b8;
        border-radius: 8px;
    }

    .contact-form h2 {
        margin-bottom: 15px;
        font-size: 28px;
    }

    .contact-form p {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border: 1px solid #d4b8a7;
        border-radius: 4px;
        font-size: 14px;
    }

    .contact-form textarea {
        min-height: 120px;
        resize: none;
    }

    .contact-form button {
        background: #b26a2f;
        color: white;
        padding: 12px 28px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    .contact-form button:hover {
        background: #8f4f1e;
    }

    /* contact info */

    .contact-info {
        padding: 20px;
    }

    .contact-info h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .info-item {
        margin-bottom: 12px;
        font-size: 16px;
    }

    /* map */

    .map-box {
        margin-top: 20px;
        border: 2px solid #e2c9b8;
        border-radius: 6px;
        overflow: hidden;
    }

    .map-box iframe {
        width: 100%;
        height: 300px;
        border: 0;
    }

    @media(max-width:900px) {
        .contact-grid {
            grid-template-columns: 1fr;
        }

    }

    @media(max-width:500px) {
        .contact-container {
            padding: 30px 15px;
        }

    }
</style>


<div class="contact-container">
    <div class="contact-grid">

        <!-- form -->
        <div class="contact-form">
            <h2>Send Us A Message</h2>
            <p>We're here to help! Fill out the form below and we'll get back to you as soon as possible.</p>
            <input type="text" placeholder="Your Name">
            <input type="email" placeholder="Your Email">
            <textarea placeholder="Your Message"></textarea>
            <button>Send Message</button>
        </div>

        <!-- contact info -->
        <div class="contact-info">
            <h2>Contact Information</h2>
            <div class="info-item">📞 +91 63582 68651</div>
            <div class="info-item">✉ Patialachic@gmail.com</div>
            <div class="info-item">📍 Surat, Gujarat.</div>
            <div class="map-box">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119066.41709451062!2d72.73988483609045!3d21.159340298803272!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be04e59411d1563%3A0xfe4558290938b042!2sSurat%2C%20Gujarat!5e0!3m2!1sen!2sin!4v1773123178774!5m2!1sen!2sin"></iframe>
            </div>
        </div>

    </div>
</div>