/* =========================
   CONTACT SECTION
========================= */

.contact-section {

    padding: 100px 20px;
}


/* =========================
   CONTACT FORM
========================= */

.contact-form {

    background:
        rgba(255,255,255,0.06);

    backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 42px;

    padding: 50px;

    box-shadow:
        0 14px 35px rgba(0,0,0,0.22);

    max-width: 720px;

    margin: auto;
}


/* =========================
   INPUTS
========================= */

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

    width: 100%;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid rgba(255,255,255,0.1);

    border-radius: 20px;

    padding: 16px 18px;

    color: white;

    margin-bottom: 20px;

    font-size: 1rem;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Placeholder */

.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color:
        rgba(255,255,255,0.5);
}


/* Focus */

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

    outline: none;

    border-color: #9f84ff;

    box-shadow:
        0 0 0 4px rgba(123,92,255,0.16);
}


/* =========================
   TEXTAREA
========================= */

.contact-form textarea {

    min-height: 140px;

    resize: vertical;
}


/* =========================
   BUTTON
========================= */

.contact-form button {

    background:
        linear-gradient(
            135deg,
            #7b5cff,
            #9d7dff
        );

    color: white;

    border: none;

    border-radius: 999px;

    padding: 16px 34px;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;
}


/* Hover */

.contact-form button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px rgba(123,92,255,0.35);
}