/* ====== Contact Page ====== */
main > div{
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:40px;
    margin-inline: auto;
    max-width: 800px;
}

main > div > p{ margin-bottom:1rem; }

/* Form wrapper */
main > div > form{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

main > div > form > div{
    display: flex;
    flex-direction: column;
    gap: 0px;
}
 
main > div > .other-contacts {
    margin-top: 40px;
}

main > div > .other-contacts div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: fit-content;
}

/* “Or contact me via” block under main */
main > div > .other-contacts div a:hover {text-decoration: underline;}

span{
    font-weight:600;
    color:var(--text);
}

/* Inputs */
input[type="text"],

input[type="email"],

textarea,

input[type="textarea"]{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    font:inherit;
    transition:border-color .2s ease, box-shadow .2s ease;
}

textarea, input[type="textarea"]{
    min-height:250px; resize:vertical;
}

/* Buttons row */
main > div > form > .form-buttons{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-direction: row;
}

main > div > form > .form-buttons button{
    width: 150px;
    font-size: medium;
}