<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contact Us | D2S Technology Limited</title>

    <style>

        /* Shared Base Styles from index.html */

        :root {

            --bg-dark: #0f172a; 

            --bg-card: #1e293b; 

            --text-main: #f8fafc; 

            --text-muted: #94a3b8; 

            --accent: #3b82f6; 

            --accent-hover: #2563eb; 

            --font-stack: 'Inter', system-ui, -apple-system, sans-serif;

        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {

            font-family: var(--font-stack);

            background-color: var(--bg-dark);

            color: var(--text-main);

            line-height: 1.6;

        }

        a { text-decoration: none; color: inherit; }

        ul { list-style-type: none; }

        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 2rem;

        }

        /* Buttons */

        .btn {

            display: inline-block;

            padding: 0.75rem 1.5rem;

            border-radius: 0.375rem;

            font-weight: 600;

            transition: all 0.2s;

            cursor: pointer;

            border: none;

            font-family: inherit;

            font-size: 1rem;

        }

        .btn-primary {

            background-color: var(--accent);

            color: white;

            border: 1px solid var(--accent);

        }

        .btn-primary:hover { background-color: var(--accent-hover); }

        /* Navbar */

        header {

            border-bottom: 1px solid rgba(255,255,255,0.1);

            padding: 1.5rem 0;

        }

        nav {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }

        .logo span { color: var(--accent); }

        .nav-links { display: flex; gap: 2rem; align-items: center; }

        .nav-links a:hover { color: var(--accent); }

        /* Contact Section specific styles */

        .contact-header {

            text-align: center;

            padding: 5rem 0 3rem;

        }

        .contact-header h1 {

            font-size: 3rem;

            margin-bottom: 1rem;

        }

        .contact-header p {

            color: var(--text-muted);

            font-size: 1.125rem;

            max-width: 600px;

            margin: 0 auto;

        }

        .contact-grid {

            display: grid;

            grid-template-columns: 1fr 1.5fr;

            gap: 4rem;

            padding-bottom: 6rem;

        }

        /* Left Side: Contact Info */

        .contact-info {

            background-color: var(--bg-card);

            padding: 2.5rem;

            border-radius: 0.5rem;

            border: 1px solid rgba(255,255,255,0.05);

            height: fit-content;

        }

        .contact-info h3 {

            font-size: 1.5rem;

            margin-bottom: 1.5rem;

            color: var(--text-main);

        }

        .info-block {

            margin-bottom: 1.5rem;

        }

        .info-block h4 {

            font-size: 0.875rem;

            color: var(--text-muted);

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 0.25rem;

        }

        .info-block p, .info-block a {

            font-size: 1.05rem;

            color: var(--text-main);

        }

        .info-block a:hover {

            color: var(--accent);

        }

        .linkedin-link {

            display: inline-flex;

            align-items: center;

            gap: 0.5rem;

            color: #0a66c2 !important; /* LinkedIn Brand Color */

            font-weight: 600;

            margin-top: 1rem;

        }

        .linkedin-link:hover {

            text-decoration: underline;

        }

        /* Right Side: Form */

        .contact-form {

            display: flex;

            flex-direction: column;

            gap: 1.5rem;

        }

        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 1.5rem;

        }

        .form-group {

            display: flex;

            flex-direction: column;

            gap: 0.5rem;

        }

        .form-group label {

            font-size: 0.9rem;

            color: var(--text-muted);

            font-weight: 500;

        }

        .form-group input, .form-group textarea {

            background-color: var(--bg-dark);

            border: 1px solid rgba(255,255,255,0.1);

            border-radius: 0.375rem;

            padding: 0.875rem 1rem;

            color: var(--text-main);

            font-family: inherit;

            font-size: 1rem;

            transition: border-color 0.2s;

        }

        .form-group input:focus, .form-group textarea:focus {

            outline: none;

            border-color: var(--accent);

            background-color: rgba(30, 41, 59, 0.5);

        }

        .form-group textarea {

            resize: vertical;

            min-height: 150px;

        }

        /* Footer */

        footer {

            padding: 3rem 0;

            text-align: center;

            border-top: 1px solid rgba(255,255,255,0.1);

            color: var(--text-muted);

            font-size: 0.875rem;

        }

        /* Responsive Design */

        @media (max-width: 860px) {

            .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }

            .form-row { grid-template-columns: 1fr; }

            .nav-links { display: none; }

        }

    </style>

</head>

<body>

    <!-- Header / Navigation -->

    <header>

        <div class="container">

            <nav>

                <a href="index.html" class="logo">D2S<span>Technology</span></a>

                <ul class="nav-links">

                    <li><a href="index.html#services">Services</a></li>

                    <li><a href="index.html#about">About</a></li>

                    <li><a href="index.html#case-studies">Case Studies</a></li>

                </ul>

            </nav>

        </div>

    </header>

    <!-- Main Content -->

    <main>

        <section class="contact-header container">

            <h1>Secure Your Infrastructure</h1>

            <p>Ready to upgrade your cybersecurity posture or build custom enterprise software? Connect with our engineering team to discuss your objectives.</p>

        </section>

        <section class="contact-grid container">

            <!-- Contact Information -->

            <div class="contact-info">

                <h3>Direct Contact</h3>

                <div class="info-block">

                    <h4>Email</h4>

                    <a href="mailto:hello@d2stechnology.com">hello@d2stechnology.com</a>

                </div>

                <div class="info-block">

                    <h4>Phone</h4>

                    <p>+1 (555) 123-4567</p>

                </div>

                <div class="info-block">

                    <h4>Headquarters</h4>

                    <p>Tech Innovation District<br>Toronto, ON, Canada</p>

                </div>

                <!-- LinkedIn Integration -->

                <div class="info-block" style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1);">

                    <h4>Leadership Connection</h4>

                    <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem;">Reach out directly to Jayesh Patel for strategic partnerships and high-level consulting.</p>

                    <a href="https://www.linkedin.com/in/jayesh-patel" target="_blank" rel="noopener noreferrer" class="linkedin-link">

                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>

                        Jayesh Patel on LinkedIn

                    </a>

                </div>

            </div>

            <!-- Contact Form -->

            <form class="contact-form" action="#" method="POST">

                <div class="form-row">

                    <div class="form-group">

                        <label for="firstName">First Name</label>

                        <input type="text" id="firstName" name="firstName" required placeholder="John">

                    </div>

                    <div class="form-group">

                        <label for="lastName">Last Name</label>

                        <input type="text" id="lastName" name="lastName" required placeholder="Doe">

                    </div>

                </div>

                <div class="form-group">

                    <label for="email">Work Email</label>

                    <input type="email" id="email" name="email" required placeholder="john@company.com">

                </div>

                <div class="form-group">

                    <label for="subject">Area of Interest</label>

                    <input type="text" id="subject" name="subject" required placeholder="e.g. Cybersecurity Audit, Custom Software">

                </div>

                <div class="form-group">

                    <label for="message">Project Details</label>

                    <textarea id="message" name="message" required placeholder="Tell us about your current infrastructure and what you're looking to achieve..."></textarea>

                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">Submit Inquiry</button>

            </form>

        </section>

    </main>

    <!-- Footer -->

    <footer>

        <div class="container">

            <p>&copy; 2026 D2S Technology Limited. All rights reserved.</p>

        </div>

    </footer>

</body>

</html>