.communication
{
    --contact-unit:     16px;
    --contact-mango:    #fe813e;
    --contact-soot:     #505050;
    --contact-gray:     #bcbcbc;
    --contact-select:   #9d9d9d;

    display:            grid;
    place-items:        center;

    background:         linear-gradient(346deg, rgba(255, 102, 61, 1) 0%, rgba(255, 145, 64, 1) 56%, rgba(255, 191, 54, 1) 100%);
}

.content
{
    display:            flex;
    flex-direction:     column;
    align-items:        center;

    width:              100%;
}



.heading
{
    width:              60vw;
    max-width:          1000px;

    padding-bottom:     calc(3rem);

    text-align:         center;
}

.heading p
{
    text-align:         center;
}





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

    gap:                1.5rem;

    width:              36rem;
    max-width:          90vw;
}





.field
{
    position:           relative;

    display:            inline-block;
    width:              100%;
}

.field::after
{
    content:            "";

    position:           absolute;
    inset:              0;

    border-radius:      inherit;
    background:         transparent;
    box-shadow:         0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    opacity:            0;
    pointer-events:     none;

    mix-blend-mode:     soft-light;
    transition:         opacity 0.2s ease;
}

.field:hover::after,
.field:focus-within::after
{
    opacity:            1;
}






.input
{
    display:            block;
    box-sizing:         border-box;

    width:              100%;
    padding:            1rem;

    border:             none;
    border-radius:      0.5rem;
    outline:            none;

    background:         white;
    color:              var(--contact-soot);


    font-family:        open-sans, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1rem;

    line-height:        2;
}

.input::placeholder
{
    color:              var(--contact-gray);
}

.input:hover::placeholder,
.input:focus::placeholder
{
    color:              var(--contact-select);
}




.form textarea
{
    min-height:         15rem;
    overflow:           hidden;
    resize:             none;
}




.submit
{
    position:           relative;
    z-index:            1;

    display:            flex;
    align-items:        center;
    justify-content:    center;


    width:              20rem;
    max-width:          90vw;

    height:             6rem;

    margin-inline:      auto;

    border:             none;
    border-radius:      1000px;

    background:         white;
    color:              var(--contact-soot);

    white-space:        nowrap;
    cursor:             pointer;
    transform:          scale(1);
    transform-origin:   center;
    transition:         opacity 0.6s ease, transform 0.8s ease;
}

.submit:disabled
{
    opacity:            0.2;
    mix-blend-mode:     overlay;

    cursor:             default;
    transform:          scale(0.95);
}

.submit:disabled:hover,
.submit:disabled:active
{
    transform:          none;
}

.submit h4
{
    font-size:          1.6rem;

    font-weight:        450;

    color:              var(--contact-mango);
}





/*@media (max-width: 1920px)
{
    .contact-section
    {
        --contact-unit: 14px;
    }
}

@media (max-width: 1400px)
{
    .contact-section
    {
        --contact-unit: 12px;
    }

    .contact-form
    {
        gap:            calc(var(--contact-unit) * 2);
    }
}

@media (max-width: 1024px)
{
    .contact-heading
    {
        width:          90vw;
        max-width:      90vw;
    }

    .contact-form
    {
        width:          90vw;
    }
}

@media (max-height: 950px)
{
    .contact-section
    {
        --contact-unit: 12px;
    }

    .contact-heading p
    {
        display:        none;
    }
}
*/