:root {

    --form-bg: #ffffffcc;
    --form-card: #f3edf6eb;

    --form-border: #7b6b82;

    --form-text: #4b4035;
    --form-muted: #8a7d70;

    --form-accent: #7b6b82;
    --form-accent-hover: #a04f95;

    --form-shadow:
        0 12px 35px rgba(0,0,0,.08);
}


/* Main card */
.contact-form-bg {
    background: var(--form-bg);
}

.contact-form-wrapper {

    max-width: 600px;

    margin: 10px auto;

    padding: 30px;

    background: var(--form-card);

    border-radius: 10px;

    box-shadow: var(--form-shadow);
}


/* Headings */

.contact-form-wrapper h1,
.contact-form-wrapper h2 {

    color: var(--form-text);

    font-weight: 700;

    margin-bottom: 10px;
}

.contact-form-wrapper p {

    color: var(--form-muted);
}


/* Labels */

.contact-form-wrapper label {

    font-weight: 600;
    font-size: 0.75rem;

    color: var(--form-text);

    margin-bottom: 8px;
    margin-top: 10px;
}


/* Inputs */

.contact-form-wrapper input,
.contact-form-wrapper textarea {

    width: 100%;

    padding: 14px 18px;

    font-size: 0.75rem;

    border: 2px solid var(--form-border);

    border-radius: 7px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* Focus */

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {

    outline: none;

    border-color: var(--form-accent);

    box-shadow:
        0 0 0 5px rgba(184,150,99,.15);
}


/* Placeholder */

.contact-form-wrapper ::placeholder {

    color: #b4a899;
}


/* Textarea */

.contact-form-wrapper textarea {

    resize: vertical;

    min-height: 160px;
}


/* Submit button */

.contact-form-wrapper button {

    width: 100px;
    height: 40px;
    border: none;

    margin-top: 10px;
    margin-left: auto; 
    float: right;
    text-size-adjust: inherit;;

    
    text-align: center;

    border-radius: 16px;

    padding: 10px;

    

    background: var(--form-accent);
 

    color: white;

    font-weight: 600;

    font-size: 0.85rem;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

    box-shadow:
        0 8px 20px rgba(180, 99, 184, 0.25);
}


/* Hover */

.contact-form-wrapper button:hover {

    background: var(--form-accent-hover);

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(133, 55, 126, 0.35);
}


/* Click */

.contact-form-wrapper button:active {

    transform: translateY(0);
}


/* Validation */

.invalid-feedback,
.empty-feedback {

    display: none;

    margin-top: 8px;

    font-size: .9rem;

    color: #c0392b;
}

.was-validated :placeholder-shown:invalid ~ .empty-feedback {

    display: block;
}

.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback {

    display: block;
}

.is-invalid,
.was-validated :invalid {

    border-color: #d9534f;
}


/* Result text */

#result {

    margin-top: 20px;

    font-weight: 500;

    text-align: center;
}