html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

```css
body {
    background-color: #111827;
}

.card {
    border-radius: 16px;
}

.form-control {
    border-width: 2px;
    transition: all .3s ease;
}

    .form-control:focus {
        background-color: #1f2937;
        color: white;
        border-color: #0d6efd;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }

.btn-primary {
    font-weight: 700;
    letter-spacing: 1px;
}

.card {
    box-shadow: 0 0 20px rgba(0,0,0,.4), 0 0 40px rgba(13,110,253,.08);
}

<form method="post"
asp-controller="Home"
asp-action="Index"
enctype="multipart/form-data" >

```
<div class="container py-5" >
<div class="row justify-content-center" >
<div class="col-12 col-lg-8 col-xl-7" >

<div class="card tech-contact-card border-0 shadow-lg" >

<div class="card-header text-center py-4" >
<h2 class="mb-2 text-white" >
Contact Detroit Software Systems
</h2 >
<p class="text-light mb-0" >
Software Engineering • Industrial Automation • Enterprise Solutions
</p >
</div >

<div class="card-body p-4 p-md-5" >

<div class="row" >
<div class="col-md-6 mb-4" >
<label class="form-label text-light" > Name</label >
<input type="text"
name="Name"
class="form-control tech-input"
placeholder="Your Name" >
</div >

<div class="col-md-6 mb-4" >
<label class="form-label text-light" > Email</label >
<input type="email"
name="Email"
class="form-control tech-input"
placeholder="your@email.com" >
</div >
</div >

<div class="mb-4" >
<label class="form-label text-light" > Subject</label >
<input type="text"
name="Subject"
class="form-control tech-input"
placeholder="Project Inquiry" >
</div >

<div class="mb-4" >
<label class="form-label text-light" > Project Details</label >
<textarea id="Body"
name="Body"
rows="8"
class="form-control tech-input"
placeholder="Tell us about your software, manufacturing, automation, or integration project..." > </textarea >
</div >

<div class="mb-4" >
<label class="form-label text-light" > Attachment</label >
<input type="file"
name="Attachment"
class="form-control tech-file" >
</div >

<div class="d-grid" >
<button type="submit"
class="btn btn-tech btn-lg" >
Request Consultation
</button >
</div >

@if (!string.IsNullOrEmpty(ViewBag.Message)) {
    <div class="alert alert-success mt-4"> @ViewBag.Message </div>
}

</div >
</div >
</div >
</div >
</div >
```

</form >

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js" > </script >

<script >
tinymce.init({
        selector: '#Body',
        height: 300,
        width: '100%',
        menubar: false,
        plugins: 'link lists',
        toolbar: 'undo redo | bold italic | bullist numlist | link'
    });
</script >


.tech-contact-card {
    background: linear-gradient( 135deg, #1b1f24 0%, #2c3138 100%);
    border: 1px solid rgba(0,123,255,.25);
    border-radius: 16px;
}

.card-header {
    background: linear-gradient( 90deg, #0d6efd, #0a58ca);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.tech-input,
.tech-file {
    background-color: #2b3035;
    color: white;
    border: 1px solid #495057;
}

    .tech-input:focus,
    .tech-file:focus {
        background-color: #343a40;
        color: white;
        border-color: #0d6efd;
        box-shadow: 0 0 15px rgba(13,110,253,.35);
    }

    .tech-input::placeholder {
        color: #adb5bd;
    }

.btn-tech {
    background: linear-gradient( 90deg, #0d6efd, #0a58ca);
    border: none;
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 14px;
    transition: .3s;
}

    .btn-tech:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(13,110,253,.35);
    }

.tox-tinymce {
    border-radius: 8px !important;
}