Decoration Contact Page Design | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Futuristic Decor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
</head>
<body>
    
    <header>
        <div class="header-bg"></div>
        <div class="header-content">
            <div class="logo">Futuristic Decor</div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#" class="active">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="floating-elements">
            <div class="floating-element" style="width: 20px; height: 20px; top: 20%; left: 10%;"></div>
            <div class="floating-element" style="width: 30px; height: 30px; top: 50%; left: 80%;"></div>
            <div class="floating-element" style="width: 15px; height: 15px; top: 70%; left: 30%;"></div>
            <div class="floating-element" style="width: 25px; height: 25px; top: 30%; left: 60%;"></div>
        </div>
        <div class="hero-content">
            <h1>Transform Your Space</h1>
            <p>Our futuristic decoration services will elevate your environment with cutting-edge design and innovative solutions. Contact us today to begin your transformation journey.</p>
            <a href="#contact" class="cta-button">Get in Touch</a>
        </div>
    </section>

<section class="contact-form-section" id="contact">
        <div class="section-title">
            <h2>Contact Us</h2>
            <p>Have questions about our futuristic decoration services? Fill out the form below and our team will get back to you within 24 hours.</p>
        </div>
        <div class="contact-container">
            <form class="contact-form" id="contactForm">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone" class="form-control">
                </div>
                <div class="form-group">
                    <label for="service">Service Interested In</label>
                    <select id="service" class="form-control">
                        <option value="">Select a service</option>
                        <option value="residential">Residential Decoration</option>
                        <option value="commercial">Commercial Decoration</option>
                        <option value="event">Event Decoration</option>
                        <option value="consultation">Design Consultation</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="message">Your Message</label>
                    <textarea id="message" class="form-control" required></textarea>
                </div>
                <button type="submit" class="submit-btn">Send Message</button>
            </form>
            <div class="contact-info">
                <div class="info-card">
                    <h3><i class="fas fa-map-marker-alt"></i> Our Location</h3>
                    <p>123 Futuristic Avenue</p>
                    <p>Design District, NY 10001</p>
                    <p>United States</p>
                </div>
                <div class="info-card">
                    <h3><i class="fas fa-envelope"></i> Email Us</h3>
                    <p><a href="mailto:info@futuristicdecor.com">info@futuristicdecor.com</a></p>
                    <p><a href="mailto:support@futuristicdecor.com">support@futuristicdecor.com</a></p>
                </div>
                <div class="info-card">
                    <h3><i class="fas fa-phone-alt"></i> Call Us</h3>
                    <p><a href="tel:+18005551234">+1 (800) 555-1234</a></p>
                    <p><a href="tel:+12125556789">+1 (212) 555-6789</a></p>
                </div>
            </div>
        </div>
    </section>

<section class="map-section">
        <div class="section-title">
            <h2>Find Us</h2>
            <p>Visit our headquarters or schedule an appointment at our design studio.</p>
        </div>
        <div class="map-container">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215576064035!2d-73.98784492416442!3d40.74844097138972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689876543210!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            <div class="map-overlay"></div>
        </div>
    </section>

<section class="team-section">
        <div class="section-title">
            <h2>Our Design Team</h2>
            <p>Meet the creative minds behind our futuristic decoration projects.</p>
        </div>
        <div class="team-grid">
            <div class="team-member">
                <div class="member-image">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Designer 1">
                </div>
                <div class="member-info">
                    <h3>Alex Johnson</h3>
                    <p>Lead Futuristic Designer</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-member">
                <div class="member-image">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Designer 2">
                </div>
                <div class="member-info">
                    <h3>Sarah Chen</h3>
                    <p>3D Space Architect</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-member">
                <div class="member-image">
                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Designer 3">
                </div>
                <div class="member-info">
                    <h3>Marcus Lee</h3>
                    <p>Lighting & Tech Specialist</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-member">
                <div class="member-image">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Designer 4">
                </div>
                <div class="member-info">
                    <h3>Elena Rodriguez</h3>
                    <p>Material Innovation Expert</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="faq-section">
        <div class="section-title">
            <h2>Frequently Asked Questions</h2>
            <p>Find answers to common questions about our futuristic decoration services.</p>
        </div>
        <div class="faq-container">
            <div class="faq-item">
                <div class="faq-question">
                    <span>What makes your decoration services "futuristic"?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <p>Our futuristic approach combines cutting-edge technology with innovative design. We incorporate smart home integration, sustainable materials, advanced lighting solutions, and interactive elements to create spaces that are both visually stunning and functionally advanced for modern living.</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>How long does a typical decoration project take?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <p>Project timelines vary based on scope and complexity. A standard residential project takes 4-8 weeks, while commercial spaces may require 8-16 weeks. We provide a detailed timeline during our initial consultation after assessing your specific needs and space requirements.</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>Do you work with existing furnishings or start from scratch?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <p>We're happy to incorporate existing pieces you love while introducing new futuristic elements. Our designers will evaluate your current furnishings and recommend which items can be integrated, upcycled, or replaced to achieve the best possible futuristic aesthetic.</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>Are your materials environmentally friendly?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <p>Absolutely. Sustainability is a core principle of our futuristic design philosophy. We prioritize eco-friendly, recycled, and innovative materials that reduce environmental impact without compromising on style or durability. Many of our materials are also smart and responsive, adapting to environmental conditions.</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">
                    <span>What's included in your design consultation?</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    <p>Our comprehensive consultation includes an in-depth needs assessment, space evaluation, conceptual sketches, technology recommendations, material samples, and a preliminary budget estimate. We'll discuss your vision, lifestyle needs, and how to future-proof your space.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials-section">
        <div class="section-title">
            <h2>Client Testimonials</h2>
            <p>Hear what our clients say about our futuristic decoration services.</p>
        </div>
        <div class="testimonials-slider">
            <div class="testimonials-container">
                <div class="testimonial">
                    <div class="testimonial-content">
                        <p>Futuristic Decor completely transformed our corporate office into a cutting-edge workspace. The smart lighting and interactive walls have impressed both our employees and clients. Their attention to detail and innovative approach exceeded all our expectations.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Client 1">
                        </div>
                        <div class="author-info">
                            <h4>Michael Thompson</h4>
                            <p>CEO, Tech Innovations Inc.</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-content">
                        <p>Our home is now a showcase of what's possible with modern design. The team at Futuristic Decor listened to our needs and created spaces that are both functional and breathtaking. The mood-responsive lighting and convertible furniture have changed how we live.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Client 2">
                        </div>
                        <div class="author-info">
                            <h4>Jennifer Park</h4>
                            <p>Homeowner, Manhattan</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-content">
                        <p>Working with Futuristic Decor on our restaurant redesign was a game-changer. The dynamic projection mapping on our walls creates an ever-changing ambiance that keeps customers coming back. Their ability to merge aesthetics with technology is unparalleled.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Client 3">
                        </div>
                        <div class="author-info">
                            <h4>David Morales</h4>
                            <p>Owner, Nexus Restaurant</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <button class="slider-btn prev-btn"><i class="fas fa-chevron-left"></i></button>
                <button class="slider-btn next-btn"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </section>

<section class="newsletter-section">
        <div class="newsletter-container">
            <div class="section-title">
                <h2>Stay Updated</h2>
                <p>Subscribe to our newsletter for the latest in futuristic design trends, exclusive offers, and project showcases.</p>
            </div>
            <form class="newsletter-form">
                <input type="email" class="newsletter-input" placeholder="Your email address" required>
                <button type="submit" class="newsletter-btn">Subscribe</button>
            </form>
        </div>
    </section>

<footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>Futuristic Decor</h3>
                <p>Transforming spaces with innovative, technology-driven design solutions for the modern world.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-pinterest-p"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Home</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Services</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Portfolio</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> About Us</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Contact</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Residential Design</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Commercial Spaces</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Smart Home Integration</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Lighting Solutions</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> Custom Furniture</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Contact Info</h3>
                <p><i class="fas fa-map-marker-alt"></i> 123 Futuristic Avenue, NY 10001</p>
                <p><i class="fas fa-phone-alt"></i> +1 (800) 555-1234</p>
                <p><i class="fas fa-envelope"></i> info@futuristicdecor.com</p>
                <p><i class="fas fa-clock"></i> Mon-Fri: 9AM - 6PM</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Futuristic Decor. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: var(--primary-yellow);"></i> for the future</p>
        </div>
    </footer>

<div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

</body>
</html>

CSS

:root {
            --primary-yellow: #FFD700;
            --dark-yellow: #FFC000;
            --light-yellow: #FFF200;
            --accent-yellow: #FFEA00;
            --black: #111111;
            --white: #f5f5f5;
            --gray: #333333;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: var(--black);
            color: var(--white);
            overflow-x: hidden;
        }

/* Header Section */
        header {
            background: linear-gradient(135deg, var(--black), var(--gray));
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
            border-bottom: 2px solid var(--primary-yellow);
        }

.header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

.logo {
            color: var(--primary-yellow);
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            animation: glow 2s infinite alternate;
        }

@keyframes glow {
            from {
                text-shadow: 0 0 5px var(--primary-yellow);
            }
            to {
                text-shadow: 0 0 15px var(--primary-yellow), 0 0 20px var(--light-yellow);
            }
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

nav a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

nav a:hover {
            color: var(--primary-yellow);
        }

nav a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary-yellow);
            transition: width 0.3s ease;
        }

nav a:hover::after {
            width: 100%;
        }

.header-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjE1LDAsMC4wNSkiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            opacity: 0.3;
            z-index: 1;
        }

/* Hero Section */
        .hero {
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1556911220-bff31c812dba') center/cover no-repeat;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 0%, var(--black) 70%);
            z-index: 1;
        }

.hero-content {
            text-align: center;
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 2rem;
            animation: fadeIn 1.5s ease-out;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-yellow);
            text-transform: uppercase;
            letter-spacing: 3px;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

.cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background-color: var(--primary-yellow);
            color: var(--black);
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            border: 2px solid var(--primary-yellow);
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

.cta-button:hover {
            background-color: transparent;
            color: var(--primary-yellow);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        }

.cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

.cta-button:hover::before {
            left: 100%;
        }

/* Floating Elements */
        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            pointer-events: none;
        }

.floating-element {
            position: absolute;
            background-color: var(--primary-yellow);
            opacity: 0.3;
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

@keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-50px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

/* Contact Form Section */
        .contact-form-section {
            padding: 5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--primary-yellow);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: var(--primary-yellow);
            margin: 1rem auto 0;
        }

.section-title p {
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

.contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }

.contact-form {
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 2.5rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.contact-form:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
        }

.form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary-yellow);
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: var(--white);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-yellow);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
            background: rgba(255, 255, 255, 0.15);
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

.submit-btn {
            background-color: var(--primary-yellow);
            color: var(--black);
            border: none;
            padding: 1rem 2rem;
            font-size: 1rem;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            width: 100%;
        }

.submit-btn:hover {
            background-color: var(--dark-yellow);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
        }

/* Contact Info Section */
        .contact-info {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

.info-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.info-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
        }

.info-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--primary-yellow);
        }

.info-card h3 {
            color: var(--primary-yellow);
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.info-card h3 i {
            font-size: 1.8rem;
        }

.info-card p, .info-card a {
            color: var(--white);
            line-height: 1.6;
            margin-bottom: 0.5rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.info-card a:hover {
            color: var(--primary-yellow);
        }

/* Map Section */
        .map-section {
            padding: 0 2rem 5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.map-container {
            height: 500px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 2px solid var(--primary-yellow);
            position: relative;
        }

.map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

.map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
            pointer-events: none;
            z-index: 1;
        }

/* Team Section */
        .team-section {
            padding: 5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSJyZ2JhKDI1NSwyMTUsMCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
        }

.team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.team-member {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 215, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }

.team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
        }

.member-image {
            height: 300px;
            overflow: hidden;
            position: relative;
        }

.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.team-member:hover .member-image img {
            transform: scale(1.1);
        }

.member-info {
            padding: 1.5rem;
        }

.member-info h3 {
            color: var(--primary-yellow);
            margin-bottom: 0.5rem;
            font-size: 1.3rem;
        }

.member-info p {
            color: var(--white);
            margin-bottom: 1rem;
            opacity: 0.8;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

.social-links a {
            color: var(--white);
            background: rgba(255, 255, 255, 0.1);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.social-links a:hover {
            background: var(--primary-yellow);
            color: var(--black);
            transform: translateY(-3px);
        }

/* FAQ Section */
        .faq-section {
            padding: 5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.faq-container {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

.faq-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(255, 215, 0, 0.2);
            transition: all 0.3s ease;
        }

.faq-item:hover {
            border-color: var(--primary-yellow);
        }

.faq-question {
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            color: var(--white);
            transition: all 0.3s ease;
        }

.faq-question:hover {
            color: var(--primary-yellow);
        }

.faq-question i {
            color: var(--primary-yellow);
            transition: transform 0.3s ease;
        }

.faq-answer {
            padding: 0 1.5rem;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
        }

.faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

.faq-item.active .faq-answer {
            max-height: 500px;
            padding-bottom: 1.5rem;
        }

/* Testimonials Section */
        .testimonials-section {
            padding: 5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSJyZ2JhKDI1NSwyMTUsMCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
        }

.testimonials-slider {
            margin-top: 3rem;
            position: relative;
            overflow: hidden;
        }

.testimonials-container {
            display: flex;
            transition: transform 0.5s ease;
        }

.testimonial {
            min-width: 100%;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            text-align: center;
            transition: all 0.3s ease;
        }

.testimonial:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
        }

.testimonial-content {
            font-style: italic;
            margin-bottom: 1.5rem;
            line-height: 1.8;
            position: relative;
        }

.testimonial-content::before,
        .testimonial-content::after {
            content: '"';
            color: var(--primary-yellow);
            font-size: 3rem;
            opacity: 0.3;
            position: absolute;
        }

.testimonial-content::before {
            top: -20px;
            left: -10px;
        }

.testimonial-content::after {
            bottom: -40px;
            right: -10px;
        }

.testimonial-author {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 1rem;
            border: 3px solid var(--primary-yellow);
        }

.author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            color: var(--primary-yellow);
            margin-bottom: 0.5rem;
        }

.author-info p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

.slider-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

.slider-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.slider-btn:hover {
            background: var(--primary-yellow);
            color: var(--black);
        }

/* Newsletter Section */
        .newsletter-section {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.9));
            text-align: center;
        }

.newsletter-container {
            max-width: 600px;
            margin: 0 auto;
        }

.newsletter-form {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
        }

.newsletter-input {
            flex: 1;
            min-width: 200px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: var(--white);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.newsletter-input:focus {
            outline: none;
            border-color: var(--primary-yellow);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
            background: rgba(255, 255, 255, 0.15);
        }

.newsletter-btn {
            background-color: var(--primary-yellow);
            color: var(--black);
            border: none;
            padding: 1rem 2rem;
            font-size: 1rem;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.newsletter-btn:hover {
            background-color: var(--dark-yellow);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
        }

/* Footer */
        footer {
            background: linear-gradient(135deg, var(--black), var(--gray));
            padding: 3rem 2rem 1.5rem;
            border-top: 2px solid var(--primary-yellow);
        }

.footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.footer-column h3 {
            color: var(--primary-yellow);
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

.footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: var(--primary-yellow);
        }

.footer-column p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: var(--white);
            text-decoration: none;
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.footer-links a:hover {
            color: var(--primary-yellow);
        }

.footer-links a i {
            font-size: 0.8rem;
        }

.footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

.footer-social a {
            color: var(--white);
            background: rgba(255, 255, 255, 0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background: var(--primary-yellow);
            color: var(--black);
            transform: translateY(-3px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background-color: var(--primary-yellow);
            color: var(--black);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

.back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background-color: var(--dark-yellow);
            transform: translateY(-5px);
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }

@media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            nav ul {
                gap: 1rem;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .contact-container {
                flex-direction: column;
            }
            
            .map-container {
                height: 400px;
            }
        }

@media (max-width: 576px) {
            .hero {
                height: 60vh;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .cta-button {
                padding: 0.8rem 1.5rem;
            }
            
            .section-title h2 {
                font-size: 1.5rem;
            }
            
            .contact-form, .info-card {
                padding: 1.5rem;
            }
            
            .map-container {
                height: 300px;
            }
            
            .team-member {
                min-width: 100%;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-input, .newsletter-btn {
                width: 100%;
            }
        }

JavaScript

// FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => {
                item.classList.toggle('active');
            });
        });

// Testimonial Slider
        const testimonialsContainer = document.querySelector('.testimonials-container');
        const testimonials = document.querySelectorAll('.testimonial');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        let currentIndex = 0;

function updateSlider() {
            testimonialsContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % testimonials.length;
            updateSlider();
        });

prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
            updateSlider();
        });

// Auto-rotate testimonials
        setInterval(() => {
            currentIndex = (currentIndex + 1) % testimonials.length;
            updateSlider();
        }, 5000);

// Back to Top Button
        const backToTopBtn = document.querySelector('.back-to-top');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.add('active');
            } else {
                backToTopBtn.classList.remove('active');
            }
        });

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Form Submission
        const contactForm = document.getElementById('contactForm');
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // Here you would typically send the form data to a server
            alert('Thank you for your message! We will get back to you soon.');
            contactForm.reset();
        });

// Newsletter Form
        const newsletterForm = document.querySelector('.newsletter-form');
        newsletterForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const emailInput = newsletterForm.querySelector('input[type="email"]');
            alert(`Thank you for subscribing with ${emailInput.value}!`);
            newsletterForm.reset();
        });

// Floating Elements Animation
        const floatingElements = document.querySelectorAll('.floating-element');
        floatingElements.forEach((el, index) => {
            // Randomize initial positions and animation
            const duration = 15 + Math.random() * 10;
            const delay = Math.random() * 5;
            const sizeVariation = Math.random() * 10;
            
            el.style.animation = `float ${duration}s infinite ${delay}s linear`;
            el.style.width = `${parseInt(el.style.width) + sizeVariation}px`;
            el.style.height = `${parseInt(el.style.height) + sizeVariation}px`;
        });

// Smooth Scrolling for Navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

Decoration Contact Page Design Preview

Download Options