<section style="max-width: 1100px; margin: 50px auto; font-family: 'Poppins', sans-serif; color: #1e293b; padding: 20px;">
<style>
/* Container */
.consultation-container {
display: flex;
gap: 50px;
background: #f9fafb;
border-radius: 16px;
padding: 40px;
box-shadow: 0 8px 25px rgba(0,0,0,0.07);
color: #1e293b;
}
/* Left side text */
.consultation-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.consultation-text h2 {
color: #2563eb;
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.consultation-text p {
font-weight: 300;
font-size: 1.1rem;
line-height: 1.5;
max-width: 400px;
color: #4b5563;
}
/* Right side form */
.consultation-form {
flex: 1;
background: white;
padding: 30px 35px;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.consultation-form form {
display: flex;
flex-direction: column;
gap: 15px;
}
.consultation-form label {
font-weight: 500;
margin-bottom: 5px;
color: #374151;
}
.consultation-form input,
.consultation-form select,
.consultation-form textarea {
padding: 12px;
font-size: 1rem;
border: 1.5px solid #d1d5db;
border-radius: 8px;
resize: vertical;
font-family: 'Poppins', sans-serif;
color: #111827;
transition: border-color 0.3s ease;
}
.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 6px #a5b8ff;
}
.consultation-form textarea {
min-height: 80px;
}
/* Submit button */
.consultation-form button {
margin-top: 20px;
padding: 15px;
background-color: #2563eb;
color: white;
font-weight: 700;
font-size: 1.1rem;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.consultation-form button:hover {
background-color: #1a47d8;
}
/* Call & Text buttons below form */
.contact-buttons {
margin-top: 30px;
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.contact-buttons a {
display: inline-block;
padding: 14px 28px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
transition: background-color 0.3s ease;
text-align: center;
min-width: 140px;
color: white;
}
.contact-buttons a.call {
background-color: #2563eb;
}
.contact-buttons a.call:hover {
background-color: #1a47d8;
}
.contact-buttons a.text {
background-color: #10b981; /* green */
}
.contact-buttons a.text:hover {
background-color: #0f9e6e;
}
/* Responsive */
@media (max-width: 900px) {
.consultation-container {
flex-direction: column;
padding: 30px 20px;
}
.consultation-text {
margin-bottom: 30px;
max-width: 100%;
}
.consultation-form {
padding: 25px 20px;
}
}
</style>
<div class="consultation-container">
<!-- Left text -->
<div class="consultation-text">
<h2>Let's Build Together</h2>
<p>
Why choose us? Because we combine creativity, strategy, and technology to capture your brand’s true essence and convert your audience into loyal customers. Let’s start your journey to unstoppable growth.
</p>
</div>
<!-- Right form -->
<div class="consultation-form">
<form action="#" method="POST" novalidate>
<label for="fullname">Full Name *</label>
<input type="text" id="fullname" name="fullname" required placeholder="Your full name">
<label for="phone">Phone Number *</label>
<input type="tel" id="phone" name="phone" required placeholder="(123) 456-7890">
<label for="company">Company Name</label>
<input type="text" id="company" name="company" placeholder="Your company name">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Your city">
<label for="state">State</label>
<select id="state" name="state" required>
<option value="" disabled selected>Select your state</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="comment">What service do you need?</label>
<textarea id="comment" name="comment" placeholder="Tell us more..."></textarea>
<button type="submit">Request My Free Consultation</button>
</form>
<!-- Call & Text Buttons -->
<div class="contact-buttons">
<a href="tel:+1234567890" class="call" aria-label="Call Us">Call Us</a>
<a href="sms:+1234567890" class="text" aria-label="Text Us">Text Us</a>
</div>
</div>
</div>
</section>
