Project Gallery
Explore Smart & Stylish Contact Page in detail
1
/1
100%
Project Overview
Smart & Stylish Contact Page
Project Description
Connect with us through our advanced, user-friendly contact platform designed for seamless communication. Whether you have inquiries, feedback, or collaboration ideas, our smart system ensures fast and reliable responses.
HTML
<div class="contact-showcase">
<!-- Hero Section -->
<div class="contact-hero">
<div class="hero-content">
<h1>Let's Create Something Amazing</h1>
<p>Connect with our world-class mechanical engineering team for innovative solutions, expert consultation, and unparalleled technical support. We transform challenges into opportunities.</p>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">500+</span>
<span class="stat-label">Projects Completed</span>
</div>
<div class="stat-item">
<span class="stat-number">50+</span>
<span class="stat-label">Expert Engineers</span>
</div>
<div class="stat-item">
<span class="stat-number">24/7</span>
<span class="stat-label">Support Available</span>
</div>
</div>
</div>
</div>
<!-- Floating Contact Cards -->
<div class="floating-contact">
<div class="float-card">
<div class="card-badge">Primary</div>
<div class="card-icon"><span>📞</span></div>
<h3>Phone Support</h3>
<p>+0000-000000</p>
<small style="color: #7f8c8d;">Available 24/7</small>
</div>
<div class="float-card">
<div class="card-icon"><span>✉️</span></div>
<h3>Email Us</h3>
<a href="mailto:mechexpert@gmail.com">mechexpert@gmail.com</a>
<small style="color: #7f8c8d;">Quick Response</small>
</div>
<div class="float-card">
<div class="card-icon"><span>📍</span></div>
<h3>Visit Us</h3>
<p>123 Innovation Hub</p>
<small style="color: #7f8c8d;">Tech City, TC 12345</small>
</div>
<div class="float-card">
<div class="card-icon"><span>💬</span></div>
<h3>Live Chat</h3>
<p>Chat with experts</p>
<small style="color: #7f8c8d;">Instant Support</small>
</div>
</div>
<!-- Main Contact Section -->
<div class="contact-premium">
<!-- Info Sidebar -->
<div class="info-sidebar">
<div class="sidebar-header">
<h2>Get in Touch</h2>
<p>We're here to help and answer any questions you might have. We look forward to hearing from you.</p>
</div>
<div class="business-hours">
<div class="hours-title">
<i>🕒</i>
<span>Business Hours</span>
</div>
<div class="hours-grid">
<div class="hours-row">
<span class="day">Monday - Friday</span>
<span class="time">9:00 AM - 6:00 PM</span>
</div>
<div class="hours-row">
<span class="day">Saturday</span>
<span class="time">10:00 AM - 4:00 PM</span>
</div>
<div class="hours-row">
<span class="day">Sunday</span>
<span class="time">Closed</span>
</div>
</div>
<div class="status-badge">
● Currently Open
</div>
</div>
<div class="social-links">
<h3>Connect With Us</h3>
<div class="social-icons">
<a href="#" class="social-icon">📘</a>
<a href="#" class="social-icon">🐦</a>
<a href="#" class="social-icon">📷</a>
<a href="#" class="social-icon">🔗</a>
<a href="#" class="social-icon">📱</a>
</div>
</div>
</div>
<!-- Premium Form -->
<div class="form-premium">
<div class="form-header">
<h2>Send us a Message</h2>
<p>Fill out the form below and we'll get back to you within 24 hours</p>
</div>
<form action="#" method="POST">
<div class="form-grid">
<div class="input-group">
<div class="input-label">
<i>👤</i>
<span>First Name *</span>
</div>
<div class="input-field">
<input type="text" placeholder="John" required>
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group">
<div class="input-label">
<i>👤</i>
<span>Last Name *</span>
</div>
<div class="input-field">
<input type="text" placeholder="Doe" required>
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group full-width">
<div class="input-label">
<i>✉️</i>
<span>Email Address *</span>
</div>
<div class="input-field">
<input type="email" placeholder="john.doe@example.com" required>
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group full-width">
<div class="input-label">
<i>📞</i>
<span>Phone Number</span>
</div>
<div class="input-field">
<input type="tel" placeholder="+1 234 567 8900">
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group full-width">
<div class="input-label">
<i>📌</i>
<span>Subject *</span>
</div>
<div class="input-field">
<select required>
<option value="">Select a subject</option>
<option value="consultation">Mechanical Consultation</option>
<option value="design">Design Engineering</option>
<option value="troubleshooting">System Troubleshooting</option>
<option value="optimization">Performance Optimization</option>
<option value="maintenance">Maintenance Services</option>
<option value="other">Other</option>
</select>
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group full-width">
<div class="input-label">
<i>💬</i>
<span>Message *</span>
</div>
<div class="input-field">
<textarea placeholder="Tell us about your project, requirements, or questions..." required></textarea>
<div class="input-highlight"></div>
</div>
</div>
<div class="input-group full-width">
<div class="input-label">
<i>📎</i>
<span>Attachments</span>
</div>
<div class="file-upload">
<i>📁</i>
<p>Drag and drop files here or click to browse</p>
<small style="color: #7f8c8d;">Max file size: 10MB</small>
</div>
</div>
</div>
<button type="submit" class="submit-btn">
Send Message
<i>→</i>
</button>
</form>
</div>
</div>
<!-- Features Section -->
<div class="features-section">
<div class="feature-block">
<div class="feature-icon">⚙️</div>
<h4>Expert Engineers</h4>
<p>Certified professionals with years of industry experience</p>
</div>
<div class="feature-block">
<div class="feature-icon">🚀</div>
<h4>Quick Response</h4>
<p>24/7 support with average 2-hour response time</p>
</div>
<div class="feature-block">
<div class="feature-icon">💎</div>
<h4>Quality Assured</h4>
<p>ISO certified processes and quality standards</p>
</div>
<div class="feature-block">
<div class="feature-icon">🌍</div>
<h4>Global Reach</h4>
<p>Serving clients across 30+ countries worldwide</p>
</div>
</div>
<!-- Testimonial Section -->
<div class="testimonial-section">
<div class="testimonial-content">
<div class="quote-icon">❝</div>
<p class="testimonial-text">"The mechanical engineering team provided exceptional consultation for our aerospace project. Their expertise and innovative solutions helped us overcome complex challenges and improve our system efficiency by 40%."</p>
<div class="testimonial-author">
<div class="author-avatar">JD</div>
<div class="author-info">
<h5>John Davis</h5>
<p>Chief Engineer, AeroSpace Corp</p>
</div>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="faq-section">
<div class="faq-header">
<h2>Frequently Asked Questions</h2>
<p>Find answers to common questions about our mechanical engineering services</p>
</div>
<div class="faq-grid">
<div class="faq-item">
<div class="faq-question">
<i>?</i>
<h4>What services do you offer?</h4>
</div>
<div class="faq-answer">
We offer comprehensive mechanical engineering services including design consulting, system optimization, troubleshooting, maintenance planning, and innovative solutions for various industries.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<i>?</i>
<h4>How quickly can you respond?</h4>
</div>
<div class="faq-answer">
We typically respond to all inquiries within 2-4 hours during business hours. For urgent matters, we offer 24/7 emergency support.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<i>?</i>
<h4>Do you offer international services?</h4>
</div>
<div class="faq-answer">
Yes, we provide consulting and engineering services to clients worldwide through virtual consultations and on-site visits when required.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<i>?</i>
<h4>What industries do you serve?</h4>
</div>
<div class="faq-answer">
We serve various industries including automotive, aerospace, energy, manufacturing, robotics, and industrial automation.
</div>
</div>
</div>
</div>
<!-- Map Section with Overlay -->
<div class="map-premium">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-73.98510768458414!3d40.75889697932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"
allowfullscreen=""
loading="lazy">
</iframe>
<div class="map-overlay">
<h4>Visit Our Office</h4>
<p>📍 123 Mechanical Engineering Hub</p>
<p>🕒 Mon-Fri: 9AM - 6PM</p>
<p>📞 +0000-000000</p>
</div>
</div>
<!-- Newsletter Section -->
<div class="newsletter-section">
<div class="newsletter-content">
<h2>Stay Updated</h2>
<p>Subscribe to our newsletter for the latest insights in mechanical engineering, industry trends, and exclusive offers.</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe</button>
</form>
<small style="color: #7f8c8d; display: block; margin-top: 20px;">
We respect your privacy. Unsubscribe at any time.
</small>
</div>
</div>
</div>CSS
<style>
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #f8faff;
}
/* Main Container */
.contact-showcase {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
/* Hero Section */
.contact-hero {
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 40px;
padding: 80px 60px;
margin-bottom: 60px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(102, 126, 234, 0.25);
}
.contact-hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transform: rotate(45deg);
animation: shine 10s infinite;
}
@keyframes shine {
0% { transform: rotate(45deg) translateY(-100%); }
20% { transform: rotate(45deg) translateY(100%); }
100% { transform: rotate(45deg) translateY(100%); }
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
}
.hero-content h1 {
font-size: 4.5em;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.2em;
max-width: 700px;
margin: 0 auto;
opacity: 0.95;
line-height: 1.8;
animation: fadeInUp 1s ease 0.2s both;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
animation: fadeInUp 1s ease 0.4s both;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5em;
font-weight: 800;
display: block;
margin-bottom: 5px;
}
.stat-label {
font-size: 1em;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Floating Contact Cards */
.floating-contact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-bottom: 60px;
transform: translateY(-40px);
}
.float-card {
background: white;
padding: 35px 25px;
border-radius: 25px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.float-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.float-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(102, 126, 234, 0.15);
}
.float-card:hover::before {
transform: scaleX(1);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2.5em;
color: white;
transform: rotate(45deg);
transition: all 0.3s ease;
}
.card-icon span {
transform: rotate(-45deg);
}
.float-card:hover .card-icon {
border-radius: 50%;
transform: rotate(90deg);
}
.float-card h3 {
font-size: 1.3em;
color: #2c3e50;
margin-bottom: 10px;
font-weight: 600;
}
.float-card p, .float-card a {
color: #7f8c8d;
text-decoration: none;
font-size: 1.1em;
transition: color 0.3s ease;
}
.float-card a:hover {
color: #667eea;
}
.card-badge {
position: absolute;
top: 15px;
right: -30px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 5px 30px;
font-size: 0.8em;
font-weight: 600;
transform: rotate(45deg);
}
/* Main Contact Section */
.contact-premium {
display: grid;
grid-template-columns: 1.2fr 1.8fr;
gap: 40px;
margin-bottom: 80px;
}
/* Info Sidebar */
.info-sidebar {
background: white;
border-radius: 30px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
height: fit-content;
position: sticky;
top: 20px;
}
.sidebar-header {
margin-bottom: 30px;
}
.sidebar-header h2 {
font-size: 2em;
color: #2c3e50;
margin-bottom: 10px;
}
.sidebar-header p {
color: #7f8c8d;
line-height: 1.6;
}
.business-hours {
background: #f8faff;
border-radius: 20px;
padding: 25px;
margin: 30px 0;
}
.hours-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-weight: 600;
color: #2c3e50;
}
.hours-grid {
display: grid;
gap: 15px;
}
.hours-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed #e0e0e0;
}
.hours-row:last-child {
border-bottom: none;
}
.day {
color: #7f8c8d;
font-weight: 500;
}
.time {
color: #2c3e50;
font-weight: 600;
}
.status-badge {
display: inline-block;
padding: 5px 15px;
background: #2ecc71;
color: white;
border-radius: 50px;
font-size: 0.8em;
font-weight: 600;
margin-top: 15px;
}
.social-links {
margin-top: 30px;
}
.social-links h3 {
font-size: 1.2em;
color: #2c3e50;
margin-bottom: 15px;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-icon {
width: 50px;
height: 50px;
background: #f8faff;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: #667eea;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-5px);
}
/* Form Section */
.form-premium {
background: white;
border-radius: 30px;
padding: 50px;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-header h2 {
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 10px;
}
.form-header p {
color: #7f8c8d;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.input-group {
margin-bottom: 25px;
}
.input-group.full-width {
grid-column: span 2;
}
.input-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
font-size: 0.95em;
}
.input-label i {
color: #667eea;
}
.input-field {
position: relative;
}
.input-field input,
.input-field select,
.input-field textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #eef2f7;
border-radius: 15px;
font-size: 1em;
font-family: inherit;
transition: all 0.3s ease;
background: #f8faff;
}
.input-field textarea {
min-height: 150px;
resize: vertical;
}
.input-field input:focus,
.input-field select:focus,
.input-field textarea:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
}
.input-highlight {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.3s ease;
}
.input-field input:focus ~ .input-highlight,
.input-field textarea:focus ~ .input-highlight {
width: 100%;
}
.file-upload {
border: 2px dashed #eef2f7;
border-radius: 15px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.file-upload:hover {
border-color: #667eea;
background: #f8faff;
}
.file-upload i {
font-size: 2em;
color: #667eea;
margin-bottom: 10px;
}
.file-upload p {
color: #7f8c8d;
font-size: 0.9em;
}
.submit-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 15px;
font-size: 1.2em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 30px;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
}
.submit-btn i {
transition: transform 0.3s ease;
}
.submit-btn:hover i {
transform: translateX(5px);
}
/* Features Section */
.features-section {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin: 80px 0;
}
.feature-block {
text-align: center;
padding: 30px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: all 0.3s ease;
}
.feature-block:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.1);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2em;
color: white;
}
.feature-block h4 {
font-size: 1.2em;
color: #2c3e50;
margin-bottom: 10px;
}
.feature-block p {
color: #7f8c8d;
font-size: 0.9em;
line-height: 1.6;
}
/* Testimonial Section */
.testimonial-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 30px;
padding: 60px;
margin: 80px 0;
color: white;
position: relative;
overflow: hidden;
}
.testimonial-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.quote-icon {
font-size: 4em;
opacity: 0.3;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1.3em;
line-height: 1.8;
margin-bottom: 30px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: 600;
}
.author-info h5 {
font-size: 1.1em;
margin-bottom: 5px;
}
.author-info p {
opacity: 0.8;
font-size: 0.9em;
}
/* FAQ Section */
.faq-section {
margin: 80px 0;
}
.faq-header {
text-align: center;
margin-bottom: 50px;
}
.faq-header h2 {
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 10px;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.faq-item {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateX(10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.1);
}
.faq-question {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.faq-question i {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9em;
}
.faq-question h4 {
font-size: 1.2em;
color: #2c3e50;
}
.faq-answer {
color: #7f8c8d;
line-height: 1.6;
margin-left: 45px;
}
/* Map Container */
.map-premium {
border-radius: 30px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
margin: 80px 0;
position: relative;
}
.map-premium iframe {
width: 100%;
height: 450px;
border: none;
display: block;
}
.map-overlay {
position: absolute;
bottom: 30px;
right: 30px;
background: white;
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
max-width: 250px;
}
.map-overlay h4 {
color: #2c3e50;
margin-bottom: 10px;
}
.map-overlay p {
color: #7f8c8d;
font-size: 0.9em;
margin-bottom: 5px;
}
/* Newsletter Section */
.newsletter-section {
background: white;
border-radius: 30px;
padding: 60px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.newsletter-content h2 {
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 15px;
}
.newsletter-content p {
color: #7f8c8d;
margin-bottom: 30px;
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 15px;
}
.newsletter-form input {
flex: 1;
padding: 15px 20px;
border: 2px solid #eef2f7;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
}
.newsletter-form input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
}
.newsletter-form button {
padding: 15px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 15px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
/* Responsive Design */
@media (max-width: 1200px) {
.floating-contact,
.features-section {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.contact-premium {
grid-template-columns: 1fr;
}
.info-sidebar {
position: static;
}
.faq-grid {
grid-template-columns: 1fr;
}
.hero-content h1 {
font-size: 3.5em;
}
}
@media (max-width: 768px) {
.contact-hero {
padding: 60px 30px;
}
.hero-content h1 {
font-size: 2.5em;
}
.hero-stats {
flex-direction: column;
gap: 30px;
}
.floating-contact,
.features-section {
grid-template-columns: 1fr;
}
.form-premium {
padding: 30px 20px;
}
.form-grid {
grid-template-columns: 1fr;
}
.input-group.full-width {
grid-column: span 1;
}
.newsletter-form {
flex-direction: column;
}
.testimonial-section {
padding: 40px 20px;
}
.map-overlay {
position: static;
margin-top: 20px;
max-width: 100%;
}
}
@media (max-width: 480px) {
.contact-hero {
padding: 40px 20px;
}
.hero-content h1 {
font-size: 2em;
}
.float-card {
padding: 25px 15px;
}
.social-icons {
flex-wrap: wrap;
}
.faq-question {
flex-direction: column;
text-align: center;
}
.faq-answer {
margin-left: 0;
text-align: center;
}
}
</style>JavaScript