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

.contact-form-div {

    background: linear-gradient(180deg, #123A55 0%, #093862 100%);

    padding: 80px 20px;

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

}

.contact-form-div h2 {

    color: #FFF;

    font-size: 2.3rem;

    font-weight: 700;

    margin-bottom: 30px;

    text-align: center;

}

.form {

    width: 100%;
    max-width: 650px;

    background: #FFF;

    padding: 40px;

    border-radius: 18px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .18);

}

.form-row {

    display: flex;

    gap: 18px;

}

.form-row input {

    flex: 1;

}

.form input,
.form textarea {

    width: 100%;

    padding: 16px 18px;

    border: 1px solid #DDE4EC;

    border-radius: 12px;

    font-size: 15px;

    font-family: 'Poppins', sans-serif;

    color: #25384D;

    transition: .25s;

    background: #FFF;

}

.form textarea {

    min-height: 140px;

    resize: none;

}

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

    color: #98A6B8;

}

.form input:hover,
.form textarea:hover {

    border-color: #BCD0E6;

}

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

    outline: none;

    border-color: #1E63D5;

    box-shadow:

        0 0 0 4px rgba(30, 99, 213, .12);

}

.form button {

    height: 58px;

    border: none;

    border-radius: 12px;

    background: linear-gradient(90deg, #1E63D5, #0F4AB8);

    color: #FFF;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s;

}

.form button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(30, 99, 213, .30);

}

.form button:active {

    transform: scale(.98);

}

.result-text {

    text-align: center;

    color: #123A55;

    font-weight: 600;

    min-height: 22px;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px) {

    .contact-form-div {

        padding: 60px 18px;

    }

    .contact-form-div h2 {

        font-size: 2rem;

        margin-bottom: 25px;

    }

    .form {

        padding: 25px;

        border-radius: 16px;

    }

    .form-row {

        flex-direction: column;

        gap: 18px;

    }

}