.elementor-62 .elementor-element.elementor-element-451eaa61{--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-62 .elementor-element.elementor-element-451eaa61:not(.elementor-motion-effects-element-type-background), .elementor-62 .elementor-element.elementor-element-451eaa61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F1EB;}.elementor-62 .elementor-element.elementor-element-06791b6{--spacer-size:50px;}.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-62 .elementor-element.elementor-element-74d11849{text-align:center;}.elementor-62 .elementor-element.elementor-element-74d11849 .elementor-heading-title{font-family:"Rosarivo", Sans-serif;font-weight:600;color:#000000;}.elementor-62 .elementor-element.elementor-element-33b66dc2{width:var( --container-widget-width, 63% );max-width:63%;--container-widget-width:63%;--container-widget-flex-grow:0;text-align:center;}.elementor-62 .elementor-element.elementor-element-33b66dc2.elementor-element{--align-self:center;}.elementor-62 .elementor-element.elementor-element-33b66dc2 .elementor-heading-title{font-family:"Poiret One", Sans-serif;font-size:19px;font-weight:600;line-height:30px;letter-spacing:1px;color:#000000;}.elementor-62 .elementor-element.elementor-element-5ce4499{--spacer-size:30px;}.elementor-62 .elementor-element.elementor-element-ee2a314{--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-62 .elementor-element.elementor-element-ee2a314:not(.elementor-motion-effects-element-type-background), .elementor-62 .elementor-element.elementor-element-ee2a314 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F1EB;}.elementor-62 .elementor-element.elementor-element-7d1a0a3{--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-62 .elementor-element.elementor-element-fc37c0d{--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;}@media(min-width:768px){.elementor-62 .elementor-element.elementor-element-7d1a0a3{--width:60%;}.elementor-62 .elementor-element.elementor-element-fc37c0d{--width:40%;}}/* Start custom CSS for shortcode, class: .elementor-element-8b32dbf *//* Form container */
.wpcf7 form {
  background: #FBF9F7;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: auto;
  font-family: 'Poppins', sans-serif;
}

/* Heading */
.wpcf7 form h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #1a1a1a;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* Labels */
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: -15px;
  color: #333;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: #FBF9F7;
  transition: all 0.2s ease;
}

/* Placeholder text */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #999;
}

/* Focus effect */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #333;
  outline: none;
}

/* Textarea */
.wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.wpcf7 input[type="submit"] {
  background: #111827;
  width: 100%;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #1f2937;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ee2a314 */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wedding Inquiry</title>
    <style>
        /* Basic Reset & Font Setup */
        :root {
            --color-background: #F5F1EB;
            --color-white: #ffffff;
            --color-text-primary: #111827; /* gray-900 */
            --color-text-secondary: #4b5563; /* gray-600 */
            --color-text-tertiary: #6b7280; /* gray-500 */
            --color-border: #e5e7eb; /* gray-200 */
            --color-border-input: #d1d5db; /* gray-300 */
            --color-blue-primary: #2563eb; /* blue-600 */
            --color-blue-hover: #1d4ed8; /* blue-700 */
            --color-blue-focus: #3b82f6; /* blue-500 */
            --color-green-light: #dcfce7; /* green-100 */
            --color-green-border: #86efac; /* green-300 */
            --color-green-text: #166534; /* green-800 */
        }

        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: var(--color-background);
            color: var(--color-text-primary);
        }

        /* Main Layout */
        .container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .card {
            width: 100%;
            max-width: 72rem; /* max-w-6xl */
            margin: auto;
            background-color: var(--color-white);
            border-radius: 1rem; /* rounded-2xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
            overflow: hidden;
            border: 1px solid var(--color-border);
        }

        .card-grid {
            display: grid;
        }

        /* Form & Content Sections */
        .form-section {
            padding: 2rem;
        }

        .contact-section {
            background-color: var(--color-background);
            padding: 2rem;
        }

        h1 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
            color: var(--color-text-primary);
            margin-bottom: 0.5rem;
        }
        
        h2 {
            font-size: 1.5rem; /* text-2xl */
            line-height: 2rem;
            font-weight: 600; /* font-semibold */
            color: var(--color-text-primary);
            margin-bottom: 1.5rem;
        }

        .subtitle {
            color: var(--color-text-secondary);
            margin-bottom: 2rem;
        }

        /* Form Elements */
        .form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* space-y-6 */
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem; /* gap-6 */
        }
        
        .input-group {
            width: 100%;
        }

        .input-label {
            display: block;
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            color: #374151; /* text-gray-700 */
            margin-bottom: 0.25rem;
        }

        .input-field, .textarea-field {
            width: 100%;
            box-sizing: border-box;
            background-color: var(--color-white);
            border: 1px solid var(--color-border-input);
            border-radius: 0.5rem; /* rounded-lg */
            padding: 0.75rem 1rem;
            color: var(--color-text-primary);
            transition: all 200ms ease-in-out;
        }

        .input-field::placeholder, .textarea-field::placeholder {
            color: var(--color-text-tertiary);
        }
        
        .input-field:focus, .textarea-field:focus {
            outline: none;
            border-color: var(--color-blue-focus);
            box-shadow: 0 0 0 2px var(--color-blue-focus);
        }

        .textarea-field {
            resize: none;
        }

        .submit-button {
            width: 100%;
            background-color: var(--color-blue-primary);
            color: var(--color-white);
            font-weight: 700; /* font-bold */
            padding: 0.75rem 1rem;
            border: none;
            border-radius: 0.5rem; /* rounded-lg */
            cursor: pointer;
            transition: all 200ms ease-in-out;
        }

        .submit-button:hover {
            background-color: var(--color-blue-hover);
        }

        .submit-button:focus {
             outline: 2px solid transparent;
             outline-offset: 2px;
             box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-focus);
        }

        .submit-button:disabled {
            background-color: #93c5fd; /* blue-400 */
            cursor: not-allowed;
        }
        
        /* Contact Info Section */
        .contact-info-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* space-y-6 */
        }

        .contact-info-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem; /* space-x-4 */
        }

        .contact-icon-wrapper {
            flex-shrink: 0;
            background-color: var(--color-white);
            padding: 0.75rem; /* p-3 */
            border-radius: 9999px; /* rounded-full */
            color: var(--color-blue-focus);
        }

        .contact-icon-wrapper svg {
            height: 1.5rem; /* h-6 */
            width: 1.5rem; /* w-6 */
        }
        
        .contact-info-item h3 {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            margin: 0;
            color: var(--color-text-primary);
        }

        .contact-info-item p {
            margin: 0;
            color: var(--color-text-secondary);
        }

        .socials-section {
            margin-top: 3rem; /* mt-12 */
            padding-top: 2rem; /* pt-8 */
            border-top: 1px solid var(--color-border);
        }

        .socials-section p {
            color: var(--color-text-secondary);
        }

        .social-links {
            display: flex;
            gap: 1rem; /* space-x-4 */
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--color-text-tertiary);
            transition: color 150ms ease-in-out;
        }

        .social-links a:hover {
            color: var(--color-text-primary);
        }

        .social-links svg {
            width: 1.5rem;
            height: 1.5rem;
        }


        /* Responsive Design */
        @media (min-width: 640px) { /* sm breakpoint */
             .container {
                padding: 1.5rem;
            }
            .form-row {
                 grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        
        @media (min-width: 768px) { /* md breakpoint */
            .card-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
             .form-section, .contact-section {
                padding: 3rem;
            }
        }

        @media (min-width: 1024px) { /* lg breakpoint */
            .container {
                padding: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-grid">
                <!-- Form Section -->
                <div class="form-section">
                    <h1>Wedding Inquiry</h1>
                    <p class="subtitle">
                        Tell us a bit about your special day. We'd love to be a part of it.
                    </p>
                    <form action="#" method="POST" class="form">
                        <div class="input-group">
                             <input type="text" id="name" name="name" placeholder="Your Name(s)" class="input-field" required />
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label for="weddingDate" class="input-label">Wedding Date</label>
                                <input type="date" id="weddingDate" name="weddingDate" class="input-field" required />
                            </div>
                            <div class="input-group">
                                <label for="venue" class="input-label">Venue</label>
                                <input type="text" id="venue" name="venue" placeholder="e.g. The Grand Hall" class="input-field" required />
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <input type="number" id="guestCount" name="guestCount" placeholder="Estimate Guest Count" class="input-field" required />
                            </div>
                            <div class="input-group">
                                <input type="text" id="referral" name="referral" placeholder="How did you hear about us?" class="input-field" required />
                            </div>
                        </div>
                        <div class="input-group">
                            <textarea id="message" name="message" placeholder="Your Message (Optional)" rows="4" class="textarea-field"></textarea>
                        </div>
                        <div>
                            <button type="submit" class="submit-button">
                                Send Inquiry
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Contact Info Section -->
                <div class="contact-section">
                    <h2>Contact Information</h2>
                    <div class="contact-info-list">
                        <div class="contact-info-item">
                            <div class="contact-icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <div>
                                <h3>Phone</h3>
                                <p>+91 70384 68173</p>
                            </div>
                        </div>
                        <div class="contact-info-item">
                            <div class="contact-icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div>
                                <h3>Email</h3>
                                <p>info@anandmeshram.com</p>
                            </div>
                        </div>
                        <div class="contact-info-item">
                            <div class="contact-icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <div>
                                <h3>Address</h3>
                                <p>Pune, India</p>
                            </div>
                        </div>
                    </div>
                    <div class="socials-section">
                        <p>Follow us</p>
                        <div class="social-links">
                            <a href="#"><svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path></svg></a>
                            <a href="#"><svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a>
                            <a href="#"><svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12.019c0 4.438 2.865 8.229 6.839 9.574.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.019C22 6.477 17.523 2 12 2z" clip-rule="evenodd"></path></svg></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>/* End custom CSS */