body    {
    margin:0;
    font-family:Arial,sans-serif;
    color:#1f2937
}

header  {
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    padding:10px 5%
}

.nav    {
    display:flex;
    align-items:center;
    gap:20px
}

.logo   {
    height:70px
}

.hero   {
    background:linear-gradient(135deg,#0b1324,#1565d8);
    color:#fff;
    padding:100px 5%;
    text-align:center
}

.button {
    display:inline-block;
    padding:12px 24px;
    background:#fff;color:#1565d8;
    text-decoration:none;border:none;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer
}

.services   {
    padding:60px 5%;
    text-align:center
}

.cards  {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px
}

.card   {
    background:#f8fafc;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08)
}

.contact-page   {
    background:#f5f7fa;
    padding:60px 20px
}

.form-container {
    max-width:700px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.1)
}

input,textarea  {
    width:100%;
    padding:12px;
    margin:8px 0 16px;
    border:1px solid #ccc;
    border-radius:6px;
    box-sizing:border-box
}

.contact-section    {
    padding:70px 5%;
    background:#f5f7fa
}
.contact-grid   {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:30px;max-width:1200px;
    margin:auto
}

.form-card form {
    display:flex;
    flex-direction:column
}

.form-card input,.form-card textarea    {
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    margin-bottom:20px
}

.contact    {background:#111827;
    color:#fff;
    text-align:center;
    padding:60px 5%
}

footer  {
    text-align:center;
    padding:20px;
    background:#0b1324;
    color:#fff
}

@media(max-width:768px) {.contact-grid{grid-template-columns:1fr}}