/* ----- Call to action section ----- */
.section-cta {
    padding: 4.8rem 0 12.8rem 0;
}

.cta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    background-color: #e67e22;
    box-shadow: 0 2.4rem 4.8rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1.1rem;
    background-image: linear-gradient(to right bottom, #eb984e, #e67e22);
    overflow: hidden;
}

.cta-img-box {
    background-image: linear-gradient(
            to right bottom,
            rgba(235, 151, 78, 0.35),
            rgba(230, 125, 34, 0.35)
        ),
        url(../img/eating.jpg);
    background-size: cover;
    background-position: center;
}

.cta-text-box {
    color: #45260a;
    padding: 4.8rem 6.4rem 6.4rem 6.4rem;
}

.cta-text-box h2 {
    color: inherit;
    margin-bottom: 3.2rem;
}

.cta-text {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 4.8rem;
}

.cta-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.2rem;
    row-gap: 2.4rem;
}

.cta-form label {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.cta-form input,
.cta-form select {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.8rem;
    font-family: inherit;
    color: inherit;
    border: none;
    background-color: #fdf2e9;
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.cta input::placeholder {
    color: #aaa;
}

.btn--form {
    background-color: #45260a;
    color: #fdf2e9;
    align-self: end;
}

.btn--form:hover {
    background-color: #fdf2e9;
    color: #555;
}

.cta *:focus {
    outline: none;
    box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}